# 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

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

## Configuration

### Environment Variables

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

```env
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:

```bash
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

```bash
npm run dev
```

Access the app at `http://localhost:3000`

### Production

```bash
npm run build
npm start
```

### Lint

```bash
npm run lint
```

## Docker Deployment

### Docker Compose

Create `docker-compose.yml`:

```yaml
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:

```bash
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