update: add gestion erreur si dossier est existant

This commit is contained in:
Tom Boullay
2026-04-14 13:26:49 +02:00
parent c795082ca4
commit 2b3d02e489
4 changed files with 287 additions and 27 deletions
+1
View File
@@ -2,3 +2,4 @@ UPLOAD_SECRET_KEY=your-secret-key-here
GITHUB_TOKEN=ghp_your-github-personal-access-token
GIT_BRANCH=main
GIT_REPO_URL=https://github.com/your-org/your-repo.git
BLENDER_PATH=/Applications/Blender.app/Contents/MacOS/Blender
+40 -11
View File
@@ -28,17 +28,18 @@ UPLOAD_SECRET_KEY=your-secret-key-here
GITHUB_TOKEN=ghp_your-github-personal-access-token
GIT_BRANCH=main
GIT_REPO_URL=https://github.com/your-org/your-repo.git
BLENDER_PATH=/Applications/Blender.app/Contents/MacOS/Blender
```
| Variable | Description | Required |
|----------|-------------|----------|
| `UPLOAD_SECRET_KEY` | Secret key for upload authentication | Yes |
| `GITHUB_TOKEN` | GitHub Personal Access Token (scope `repo`) | Yes |
| `GITHUB_TOKEN` | GitHub Personal Access Token (fine-grained, `Contents: Read and write`) | Yes |
| `GIT_BRANCH` | Target branch (default: main) | No |
| `GIT_REPO_URL` | Target GitHub repository URL | Yes |
| `BLENDER_PATH` | Path to Blender binary (default: `blender`) | No |
> To create a token: GitHub > Settings > Developer settings > Personal access tokens > Generate new token (classic) with the `repo` scope.
> To create a token: GitHub > Settings > Developer settings > Fine-grained personal access tokens > select the target repo > Permissions > Contents: Read and write.
## Usage
@@ -50,7 +51,7 @@ npm run dev
Access the app at `http://localhost:3000`
> **Note:** Draco compression requires Blender installed locally. If Blender is not available, models are pushed to GitHub without compression.
> **Note:** Draco compression requires Blender installed locally. On macOS, Blender is typically at `/Applications/Blender.app/Contents/MacOS/Blender`. Set `BLENDER_PATH` in `.env.local` accordingly. If Blender is not available, models are pushed to GitHub without compression.
### Production (Coolify / Docker)
@@ -68,25 +69,53 @@ The Dockerfile includes Blender headless for automatic Draco compression.
## How it works
1. The user enters their access key
2. They select a folder containing:
2. They pick a **destination** (`farm`, `map`, `powergrid`, `workshop`, `general`, `environment`)
3. They select a folder containing:
- `model.glb` or `model.gltf` (required)
- Textures: `roughness`, `normal`, `metalness`, `color`, `displace` (`.png/.jpg/.webp`, optional)
3. The model is displayed in a 3D preview
4. On clicking "Upload & Push to GitHub", each file is sent to the `/api/upload` endpoint
5. For models: the file is written to `/tmp`, compressed with Blender Draco, then the compressed version is pushed to GitHub
6. For textures: pushed directly to GitHub without compression
7. If Blender is unavailable, the original model is pushed as-is (graceful fallback)
4. The model is displayed in a 3D preview
5. On clicking "Envoyer sur GitHub":
- The app checks if the folder already exists on the remote repo
- If it exists, a confirmation dialog is shown listing the existing files that will be replaced
- On confirmation (or if the folder is new), all files are sent to the `/api/upload` endpoint
6. For models: the file is written to `/tmp`, compressed with Blender Draco, then the compressed version is pushed
7. For textures: pushed directly without compression
8. All files are pushed in a **single commit** with a formatted message:
```
update: upload-gltf add a new model -> farm/my-model
📦 Model
✅ model.gltf (compressed)
🎨 Textures
✅ color.jpg
❌ metalness (manquant)
```
9. If the folder already existed, orphan files (present in the old version but not in the new upload) are deleted in the same commit
10. If Blender is unavailable, the original model is pushed as-is (graceful fallback)
## Destinations
Uploaded models are pushed to `public/models/<destination>/<folderName>/` in the target repo:
| Destination | Path |
|-------------|------|
| Farm | `public/models/farm/` |
| Map | `public/models/map/` |
| Powergrid | `public/models/powergrid/` |
| Workshop | `public/models/workshop/` |
| General | `public/models/general/` |
| Environment | `public/models/environment/` |
## Project Structure
```
app/
├── api/upload/route.ts # API: validation + Draco compression + GitHub push
├── api/upload/route.ts # API: GET (check existence) + POST (compress + push)
├── globals.css # Tailwind + Google Fonts
├── layout.tsx # Root layout
└── page.tsx # Home page
components/
├── UploadZone.tsx # UI: key input, folder picker, validation, upload
├── UploadZone.tsx # UI: key input, destination picker, folder picker, validation, overwrite confirmation, upload
├── ModelViewer.tsx # Lazy wrapper for the 3D viewer
└── SceneViewer.tsx # Three.js Canvas
scripts/
+115 -10
View File
@@ -15,6 +15,7 @@ const MODEL_EXTENSIONS = new Set(['.glb', '.gltf'])
const TEXTURE_EXTENSIONS = new Set(['.png', '.jpg', '.jpeg', '.webp'])
const ALL_ALLOWED_EXTENSIONS = new Set([...MODEL_EXTENSIONS, ...TEXTURE_EXTENSIONS])
const REQUIRED_TEXTURES = ['roughness', 'normal', 'metalness', 'color', 'displace']
const VALID_DESTINATIONS = new Set(['farm', 'map', 'powergrid', 'workshop', 'general', 'environment'])
const TMP_DIR = join('/tmp', 'assets')
@@ -89,11 +90,12 @@ async function compressWithBlender(
function buildCommitMessage(
folderName: string,
destination: string,
modelFilename: string,
textureNames: string[],
compressed: boolean,
): string {
const title = `update: from upload-gltf add a new model -> ${folderName}`
const title = `update: upload-gltf add a new model -> ${destination}/${folderName}`
const foundTextures = new Set(
textureNames.map(t => t.toLowerCase().replace(/\.[^.]+$/, ''))
@@ -111,8 +113,7 @@ function buildCommitMessage(
title,
'',
'📦 Model',
`${modelFilename}${compressed ? ' (Draco)' : ''}`,
'',
`${modelFilename}${compressed ? ' (compressed)' : ''}`,
'🎨 Textures',
...textureLines,
]
@@ -133,12 +134,19 @@ interface ParsedFile {
async function parseMultiUpload(req: NextRequest): Promise<{
folderName: string
destination: string
files: ParsedFile[]
}> {
const formData = await req.formData()
const folderName = (formData.get('folderName') as string | null)?.trim() || 'assets'
const safeFolderName = sanitizeFilename(folderName).replace(/[^a-zA-Z0-9-_]/g, '-')
const rawDestination = (formData.get('destination') as string | null)?.trim() || 'general'
if (!VALID_DESTINATIONS.has(rawDestination)) {
throw new Error(`Destination invalide: "${rawDestination}"`)
}
const destination = rawDestination
const fileEntries = formData.getAll('files') as File[]
const fileTypes = formData.getAll('fileTypes') as string[]
const textureNames = formData.getAll('textureNames') as string[]
@@ -176,7 +184,7 @@ async function parseMultiUpload(req: NextRequest): Promise<{
parsed.push({ filename, buffer, isModel, textureName: texName || undefined })
}
return { folderName: safeFolderName, files: parsed }
return { folderName: safeFolderName, destination, files: parsed }
}
// ---------------------------------------------------------------------------
@@ -186,6 +194,7 @@ async function parseMultiUpload(req: NextRequest): Promise<{
async function pushAllToGitHub(
folderName: string,
files: { path: string; contentBase64: string }[],
deletePaths: string[],
commitMessage: string
): Promise<{ commitUrl: string }> {
const octokit = getOctokit()
@@ -219,17 +228,30 @@ async function pushAllToGitHub(
)
)
// 4. Create a single tree with all files
// 4. Create a single tree with all files (add new + delete orphans)
const newFilePaths = new Set(files.map(f => f.path))
const deleteEntries = deletePaths
.filter(p => !newFilePaths.has(p))
.map(p => ({
path: p,
mode: '100644' as const,
type: 'blob' as const,
sha: null,
}))
const { data: newTree } = await octokit.git.createTree({
owner,
repo,
base_tree: commit.tree.sha,
tree: files.map((f, i) => ({
tree: [
...files.map((f, i) => ({
path: f.path,
mode: '100644' as const,
type: 'blob' as const,
sha: blobResults[i].data.sha,
})),
...deleteEntries,
],
})
// 5. Create a single commit
@@ -252,6 +274,65 @@ async function pushAllToGitHub(
return { commitUrl: newCommit.html_url }
}
// ---------------------------------------------------------------------------
// GET handler — check if folder already exists on remote
// ---------------------------------------------------------------------------
export async function GET(req: NextRequest) {
const { searchParams } = new URL(req.url)
const destination = searchParams.get('destination')?.trim()
const folderName = searchParams.get('folderName')?.trim()
const secret = req.headers.get('x-upload-secret')
const expectedSecret = process.env.UPLOAD_SECRET_KEY
if (!expectedSecret || !secret || secret !== expectedSecret) {
return NextResponse.json({ success: false, error: 'Non autorise' }, { status: 401 })
}
if (!destination || !folderName) {
return NextResponse.json({ success: false, error: 'Parametres manquants' }, { status: 400 })
}
if (!VALID_DESTINATIONS.has(destination)) {
return NextResponse.json({ success: false, error: 'Destination invalide' }, { status: 400 })
}
const safeFolderName = sanitizeFilename(folderName).replace(/[^a-zA-Z0-9-_]/g, '-')
const folderPath = `public/models/${destination}/${safeFolderName}`
try {
const octokit = getOctokit()
const { owner, repo } = parseRepoUrl()
const branch = process.env.GIT_BRANCH ?? 'main'
const { data } = await octokit.repos.getContent({
owner,
repo,
path: folderPath,
ref: branch,
})
if (Array.isArray(data)) {
const existingFiles = data.map(f => f.name)
return NextResponse.json({
success: true,
exists: true,
path: folderPath,
files: existingFiles,
})
}
return NextResponse.json({ success: true, exists: false })
} catch (err: unknown) {
const status = (err as { status?: number })?.status
if (status === 404) {
return NextResponse.json({ success: true, exists: false })
}
const message = err instanceof Error ? err.message : 'Erreur inconnue'
return NextResponse.json({ success: false, error: message }, { status: 500 })
}
}
// ---------------------------------------------------------------------------
// POST handler
// ---------------------------------------------------------------------------
@@ -277,10 +358,11 @@ export async function POST(req: NextRequest) {
// --- Parse all files ---
let folderName: string
let destination: string
let parsedFiles: ParsedFile[]
try {
;({ folderName, files: parsedFiles } = await parseMultiUpload(req))
;({ folderName, destination, files: parsedFiles } = await parseMultiUpload(req))
} catch (err) {
const message = err instanceof Error ? err.message : 'Erreur inconnue'
return NextResponse.json({ success: false, error: message }, { status: 400 })
@@ -325,17 +407,40 @@ export async function POST(req: NextRequest) {
}
filesToPush.push({
path: `public/assets/${folderName}/${pf.filename}`,
path: `public/models/${destination}/${folderName}/${pf.filename}`,
contentBase64: content.toString('base64'),
})
}
// --- Build commit message ---
const commitMessage = buildCommitMessage(folderName, modelFilename, textureNames, compressed)
const commitMessage = buildCommitMessage(folderName, destination, modelFilename, textureNames, compressed)
// --- Detect existing files to clean up orphans ---
const folderPath = `public/models/${destination}/${folderName}`
let existingFilePaths: string[] = []
try {
const octokit = getOctokit()
const { owner, repo } = parseRepoUrl()
const branch = process.env.GIT_BRANCH ?? 'main'
const { data } = await octokit.repos.getContent({
owner,
repo,
path: folderPath,
ref: branch,
})
if (Array.isArray(data)) {
existingFilePaths = data.map(f => `${folderPath}/${f.name}`)
}
} catch {
// 404 = folder doesn't exist yet, no cleanup needed
}
// --- Push all in one commit ---
try {
const { commitUrl } = await pushAllToGitHub(folderName, filesToPush, commitMessage)
const { commitUrl } = await pushAllToGitHub(folderName, filesToPush, existingFilePaths, commitMessage)
return NextResponse.json({
success: true,
+125
View File
@@ -28,6 +28,15 @@ interface FolderEntry {
const REQUIRED_TEXTURES = ['roughness', 'normal', 'metalness', 'color', 'displace']
const TEXTURE_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.webp']
const DESTINATIONS = [
{ value: 'farm', label: 'Farm' },
{ value: 'map', label: 'Map' },
{ value: 'powergrid', label: 'Powergrid' },
{ value: 'workshop', label: 'Workshop' },
{ value: 'general', label: 'General' },
{ value: 'environment', label: 'Environment' },
] as const
function formatBytes(bytes: number): string {
if (bytes === 0) return '0 B'
const k = 1024
@@ -79,13 +88,35 @@ function validateFolder(files: File[]): { model?: File; textures: TextureFile[];
return result
}
async function checkFolderExists(
folderName: string,
destination: string,
secret: string,
): Promise<{ exists: boolean; files: string[] }> {
try {
const params = new URLSearchParams({ folderName, destination })
const res = await fetch(`/api/upload?${params}`, {
headers: { 'x-upload-secret': secret.trim() },
})
const data = await res.json()
if (data.success && data.exists) {
return { exists: true, files: data.files || [] }
}
return { exists: false, files: [] }
} catch {
return { exists: false, files: [] }
}
}
async function uploadFolder(
folder: FolderEntry,
secret: string,
destination: string,
onProgress: (pct: number) => void
): Promise<{ success: boolean; filename?: string; error?: string }> {
const formData = new FormData()
formData.append('folderName', folder.folderName)
formData.append('destination', destination)
// Model file
formData.append('files', folder.modelFile)
@@ -130,7 +161,9 @@ export default function UploadZone() {
const [secretVisible, setSecretVisible] = useState(false)
const [globalError, setGlobalError] = useState<string | null>(null)
const [secretError, setSecretError] = useState<string | null>(null)
const [destination, setDestination] = useState<typeof DESTINATIONS[number]['value']>(DESTINATIONS[0].value)
const [abortController, setAbortController] = useState<AbortController | null>(null)
const [overwriteConfirm, setOverwriteConfirm] = useState<{ folderName: string; files: string[] } | null>(null)
const isSecretEmpty = !secret.trim()
@@ -146,6 +179,21 @@ export default function UploadZone() {
if (files.length === 0) return
setSecretError(null)
setGlobalError(null)
// Check if folder already exists on remote
const folder = files[0]
const check = await checkFolderExists(folder.folderName, destination, secret)
if (check.exists) {
setOverwriteConfirm({ folderName: folder.folderName, files: check.files })
return
}
await proceedUpload()
}
const proceedUpload = async () => {
setOverwriteConfirm(null)
setIsUploading(true)
setGlobalError(null)
@@ -157,6 +205,7 @@ export default function UploadZone() {
const result = await uploadFolder(
files[i],
secret,
destination,
(pct) => updateFile(i, { progress: pct })
)
@@ -237,6 +286,28 @@ export default function UploadZone() {
)}
</div>
<div className="space-y-1.5">
<label className="block text-sm font-medium text-gray-300">Destination</label>
<div className="grid grid-cols-3 gap-2">
{DESTINATIONS.map((dest) => (
<button
key={dest.value}
type="button"
onClick={() => setDestination(dest.value)}
disabled={isUploading}
className={`px-3 py-2 rounded-xl text-sm font-medium transition-all duration-150 border
disabled:opacity-50 disabled:cursor-not-allowed
${destination === dest.value
? 'bg-white text-[#000000] border-white'
: 'bg-black-800 text-gray-400 border-white/20 hover:border-white/40 hover:text-gray-200'
}`}
>
{dest.label}
</button>
))}
</div>
</div>
<input
type="file"
id="folder-input"
@@ -448,6 +519,60 @@ export default function UploadZone() {
</button>
)}
</div>
{overwriteConfirm && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="bg-black-900 border border-white/20 rounded-2xl p-6 max-w-md w-full mx-4 space-y-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-full bg-yellow-900/30 flex items-center justify-center shrink-0">
<svg className="w-5 h-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div>
<h3 className="text-sm font-semibold text-gray-100">Dossier deja existant</h3>
<p className="text-xs text-gray-400 mt-0.5">
<span className="font-mono text-yellow-400">{destination}/{overwriteConfirm.folderName}</span> existe deja sur le repo.
</p>
</div>
</div>
{overwriteConfirm.files.length > 0 && (
<div className="bg-black-800 border border-white/10 rounded-xl p-3 max-h-32 overflow-y-auto">
<p className="text-xs text-gray-500 mb-1.5">Fichiers existants qui seront remplaces :</p>
<ul className="space-y-0.5">
{overwriteConfirm.files.map((f) => (
<li key={f} className="text-xs text-gray-400 font-mono">{f}</li>
))}
</ul>
</div>
)}
<p className="text-xs text-gray-400">
Les anciens fichiers seront supprimes et remplaces par les nouveaux. Cette action est irreversible.
</p>
<div className="flex gap-3">
<button
onClick={() => setOverwriteConfirm(null)}
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
py-2.5 px-4 rounded-xl border border-white/10 transition-colors duration-150
hover:bg-black-600"
>
Annuler
</button>
<button
onClick={proceedUpload}
className="flex-1 bg-yellow-600 text-[#000000] font-medium text-sm
py-2.5 px-4 rounded-xl transition-colors duration-150
hover:bg-yellow-500"
>
Remplacer
</button>
</div>
</div>
</div>
)}
</div>
)
}