upload-GLTF

A secure upload interface for 3D assets with automatic deployment to GitHub via Git LFS. Designers can drag-and-drop models and textures, which are automatically versioned and pushed to a GitHub repository for easy collaboration and asset management. Built with Next.js, Tailwind CSS, and React.

Description

This is a Next.js web application that allows designers and developers to upload 3D models and textures via a modern drag-and-drop interface. Uploaded files are automatically committed and pushed to a GitHub repository using Git LFS for efficient version control of large binary files.

Features

• Drag-and-drop upload for 3D models (.glb, .gltf, .fbx) and textures (.png, .jpg, .jpeg, .webp, .ktx2)
• 2 GB max file size per upload
• Automatic Git deployment — files are committed and pushed to GitHub via Git LFS
• Secret key authentication for secure uploads
• Modern UI built with Tailwind CSS and React

Prerequisites

• Node.js 18+
• npm or yarn

Installation

git clone <repo-url>
cd upload-GLTF
npm install

Configuration

Environment Variables

Create a .env.local file in the root directory:

UPLOAD_SECRET_KEY=your-secret-key-here
GIT_BRANCH=main
GIT_REPO_URL=git@github.com:username/repo.git

Variable	Description	Required
UPLOAD_SECRET_KEY	Secret key for authentication	Yes
GIT_BRANCH	Git branch to push to (default: main)	No
GIT_REPO_URL	Git repository URL for SSH push	No

Git LFS Setup

Install Git LFS and track the asset file types by creating a .gitattributes file:

git lfs install

Create .gitattributes:

*.glb filter=lfs diff=lfs merge=lfs -text
*.gltf filter=lfs diff=lfs merge=lfs -text
*.fbx filter=lfs diff=lfs merge=lfs -text
*.png filter=lfs diff=lfs merge=lfs -text
*.jpg filter=lfs diff=lfs merge=lfs -text
*.jpeg filter=lfs diff=lfs merge=lfs -text
*.webp filter=lfs diff=lfs merge=lfs -text
*.ktx2 filter=lfs diff=lfs merge=lfs -text

Usage

Development

npm run dev

Access the app at http://localhost:3000

Production

npm run build
npm start

Lint

npm run lint

Docker Deployment

Docker Compose

Create docker-compose.yml:

services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - UPLOAD_SECRET_KEY=your-secret-key
      - GIT_BRANCH=main
      - GIT_REPO_URL=git@github.com:username/repo.git
    volumes:
      - ./public:/app/public
      - ~/.ssh:/root/.ssh

Build and run:

docker-compose up --build

Coolify

The Dockerfile is optimized for Coolify deployment. Configure environment variables through the Coolify interface.

Project Structure

.
├── app/
│   ├── api/upload/route.ts   # Upload API + git push
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   └── UploadZone.tsx        # Upload component
├── public/
│   ├── models/               # Uploaded 3D models
│   └── textures/             # Uploaded textures
├── Dockerfile
├── package.json
├── tailwind.config.ts
└── tsconfig.json

Supported File Formats

Type	Extensions
3D Models	.glb, .gltf, .fbx
Textures	.png, .jpg, .jpeg, .webp, .ktx2

License

MIT