diff --git a/.env.example b/.env.example index 8c8da71..09c38e5 100644 --- a/.env.example +++ b/.env.example @@ -1,7 +1,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 - -# Optional: path to Blender binary (defaults to "blender" in PATH) -# BLENDER_PATH=/usr/bin/blender +GIT_REPO_URL=https://github.com/your-org/your-repo.git \ No newline at end of file diff --git a/app/api/upload/route.ts b/app/api/upload/route.ts index 223d851..7f0b8d1 100644 --- a/app/api/upload/route.ts +++ b/app/api/upload/route.ts @@ -14,6 +14,7 @@ export const dynamic = 'force-dynamic' 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 TMP_DIR = join('/tmp', 'assets') @@ -83,50 +84,109 @@ async function compressWithBlender( } // --------------------------------------------------------------------------- -// Parse uploaded file from FormData +// Build commit message with checklist // --------------------------------------------------------------------------- -async function parseUpload(req: NextRequest) { - const formData = await req.formData() - const file = formData.get('file') as File | null - const folderName = (formData.get('folderName') as string | null)?.trim() || 'assets' - const fileType = formData.get('fileType') as string | null - const textureName = formData.get('textureName') as string | null +function buildCommitMessage( + folderName: string, + modelFilename: string, + textureNames: string[], + compressed: boolean, +): string { + const title = `update: from upload-gltf add a new model -> ${folderName}` - if (!file || file.size === 0) { - throw new Error('Aucun fichier recu') - } + const foundTextures = new Set( + textureNames.map(t => t.toLowerCase().replace(/\.[^.]+$/, '')) + ) - const originalSafe = sanitizeFilename(file.name) - const ext = extname(originalSafe).toLowerCase() + const textureLines = REQUIRED_TEXTURES.map(tex => { + if (foundTextures.has(tex)) { + const actual = textureNames.find(t => t.toLowerCase().replace(/\.[^.]+$/, '') === tex) + return ` ✅ ${actual}` + } + return ` ❌ ${tex} (manquant)` + }) - if (!ALL_ALLOWED_EXTENSIONS.has(ext)) { - throw new Error(`Extension non autorisee: "${ext}"`) - } + const lines = [ + title, + '', + '📦 Model', + ` ✅ ${modelFilename}${compressed ? ' (Draco)' : ''}`, + '', + '🎨 Textures', + ...textureLines, + ] - const safeFolderName = sanitizeFilename(folderName).replace(/[^a-zA-Z0-9-_]/g, '-') - - let filename: string - if (fileType === 'texture' && textureName) { - filename = sanitizeFilename(textureName) - } else { - filename = originalSafe - } - - const isModel = MODEL_EXTENSIONS.has(ext) - const buffer = Buffer.from(await file.arrayBuffer()) - - return { filename, buffer, safeFolderName, isModel } + return lines.join('\n') } // --------------------------------------------------------------------------- -// Push a single file to GitHub via the API +// Parse all files from a multi-file FormData // --------------------------------------------------------------------------- -async function pushFileToGitHub( - filePath: string, - contentBase64: string, +interface ParsedFile { + filename: string + buffer: Buffer + isModel: boolean + textureName?: string +} + +async function parseMultiUpload(req: NextRequest): Promise<{ folderName: 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 fileEntries = formData.getAll('files') as File[] + const fileTypes = formData.getAll('fileTypes') as string[] + const textureNames = formData.getAll('textureNames') as string[] + + if (fileEntries.length === 0) { + throw new Error('Aucun fichier recu') + } + + const parsed: ParsedFile[] = [] + + for (let i = 0; i < fileEntries.length; i++) { + const file = fileEntries[i] + if (!file || file.size === 0) continue + + const fileType = fileTypes[i] || 'model' + const texName = textureNames[i] || '' + + const originalSafe = sanitizeFilename(file.name) + const ext = extname(originalSafe).toLowerCase() + + if (!ALL_ALLOWED_EXTENSIONS.has(ext)) { + throw new Error(`Extension non autorisee: "${ext}"`) + } + + let filename: string + if (fileType === 'texture' && texName) { + filename = sanitizeFilename(texName) + } else { + filename = originalSafe + } + + const isModel = MODEL_EXTENSIONS.has(ext) + const buffer = Buffer.from(await file.arrayBuffer()) + + parsed.push({ filename, buffer, isModel, textureName: texName || undefined }) + } + + return { folderName: safeFolderName, files: parsed } +} + +// --------------------------------------------------------------------------- +// Push all files in a single commit +// --------------------------------------------------------------------------- + +async function pushAllToGitHub( + folderName: string, + files: { path: string; contentBase64: string }[], + commitMessage: string ): Promise<{ commitUrl: string }> { const octokit = getOctokit() const { owner, repo } = parseRepoUrl() @@ -147,35 +207,36 @@ async function pushFileToGitHub( commit_sha: latestCommitSha, }) - // 3. Create blob - const { data: blob } = await octokit.git.createBlob({ - owner, - repo, - content: contentBase64, - encoding: 'base64', - }) + // 3. Create all blobs in parallel + const blobResults = await Promise.all( + files.map(f => + octokit.git.createBlob({ + owner, + repo, + content: f.contentBase64, + encoding: 'base64', + }) + ) + ) - // 4. Create tree + // 4. Create a single tree with all files const { data: newTree } = await octokit.git.createTree({ owner, repo, base_tree: commit.tree.sha, - tree: [ - { - path: filePath, - mode: '100644', - type: 'blob', - sha: blob.sha, - }, - ], + tree: files.map((f, i) => ({ + path: f.path, + mode: '100644' as const, + type: 'blob' as const, + sha: blobResults[i].data.sha, + })), }) - // 5. Create commit - const timestamp = new Date().toISOString() + // 5. Create a single commit const { data: newCommit } = await octokit.git.createCommit({ owner, repo, - message: `Design Update: ${folderName} [${timestamp}]`, + message: commitMessage, tree: newTree.sha, parents: [latestCommitSha], }) @@ -214,67 +275,75 @@ export async function POST(req: NextRequest) { ) } - // --- Parse upload --- - let filename: string - let buffer: Buffer - let safeFolderName: string - let isModel: boolean + // --- Parse all files --- + let folderName: string + let parsedFiles: ParsedFile[] try { - ;({ filename, buffer, safeFolderName, isModel } = await parseUpload(req)) + ;({ folderName, 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 }) } - // --- Write to /tmp --- - const tmpFolder = join(TMP_DIR, safeFolderName) - await mkdir(tmpFolder, { recursive: true }) - const tmpFilePath = join(tmpFolder, filename) - await writeFile(tmpFilePath, buffer) - - let contentToUpload: Buffer = buffer + // --- Process files (compress model if possible) --- + const filesToPush: { path: string; contentBase64: string }[] = [] + let modelFilename = '' let compressed = false let compressionError: string | undefined + const textureNames: string[] = [] - // --- Compress model with Blender (if available) --- - if (isModel) { - const stem = filename.replace(/\.[^.]+$/, '') - const compressedPath = join(tmpFolder, `${stem}_compressed.glb`) + for (const pf of parsedFiles) { + let content = pf.buffer - const result = await compressWithBlender(tmpFilePath, compressedPath) + if (pf.isModel) { + modelFilename = pf.filename - if (result.success && existsSync(compressedPath)) { - contentToUpload = await readFile(compressedPath) - compressed = true - // Clean up compressed temp file - await unlink(compressedPath).catch(() => {}) + // Write to /tmp for Blender compression + const tmpFolder = join(TMP_DIR, folderName) + await mkdir(tmpFolder, { recursive: true }) + const tmpFilePath = join(tmpFolder, pf.filename) + await writeFile(tmpFilePath, pf.buffer) + + const stem = pf.filename.replace(/\.[^.]+$/, '') + const compressedPath = join(tmpFolder, `${stem}_compressed.glb`) + + const result = await compressWithBlender(tmpFilePath, compressedPath) + + if (result.success && existsSync(compressedPath)) { + content = await readFile(compressedPath) + compressed = true + await unlink(compressedPath).catch(() => {}) + } else { + compressionError = result.error + } + + await unlink(tmpFilePath).catch(() => {}) + await rm(tmpFolder, { recursive: true, force: true }).catch(() => {}) } else { - // Blender not available or failed — push original - compressionError = result.error + textureNames.push(pf.filename) } + + filesToPush.push({ + path: `public/assets/${folderName}/${pf.filename}`, + contentBase64: content.toString('base64'), + }) } - // Clean up original temp file - await unlink(tmpFilePath).catch(() => {}) - // Clean up folder if empty - await rm(tmpFolder, { recursive: true, force: true }).catch(() => {}) - - // --- Push to GitHub --- - const gitPath = `public/assets/${safeFolderName}/${filename}` - const contentBase64 = contentToUpload.toString('base64') + // --- Build commit message --- + const commitMessage = buildCommitMessage(folderName, modelFilename, textureNames, compressed) + // --- Push all in one commit --- try { - const { commitUrl } = await pushFileToGitHub(gitPath, contentBase64, safeFolderName) + const { commitUrl } = await pushAllToGitHub(folderName, filesToPush, commitMessage) return NextResponse.json({ success: true, - filename, + folderName, + filesCount: filesToPush.length, compressed, compressionError: compressionError || undefined, - message: compressed - ? `"${filename}" compresse avec Draco et pousse sur GitHub.` - : `"${filename}" pousse sur GitHub${compressionError ? ' (sans compression: ' + compressionError + ')' : ''}.`, + message: `${filesToPush.length} fichier(s) envoye(s) sur GitHub en un seul commit.`, commitUrl, }) } catch (err) { diff --git a/app/layout.tsx b/app/layout.tsx index ecdc04f..1a9aa47 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,7 +3,7 @@ import './globals.css' export const metadata: Metadata = { title: ' Upload GLTF', - description: 'Interface de dépôt sécurisé pour fichiers 3D (.glb, .gltf, .fbx) et de versionnement automatique', + description: 'Interface de depot securise pour fichiers 3D (.glb, .gltf) avec versionnement automatique sur GitHub', } export default function RootLayout({ diff --git a/app/page.tsx b/app/page.tsx index d11a3c2..dfd65de 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -8,19 +8,17 @@ export default function Home() { Upload GLTF

- Drop your 3D files — they will be automatically versioned -
and pushed to your GitHub repository via Git LFS. + Deposez vos fichiers 3D — ils seront automatiquement versionnes +
et envoyes sur votre depot GitHub.

) diff --git a/components/UploadZone.tsx b/components/UploadZone.tsx index 9ddf41d..97a181f 100644 --- a/components/UploadZone.tsx +++ b/components/UploadZone.tsx @@ -1,6 +1,6 @@ 'use client' -import { useCallback, useRef, useState } from 'react' +import { useState } from 'react' import dynamic from 'next/dynamic' const ModelViewer = dynamic(() => import('./ModelViewer'), { ssr: false }) @@ -79,79 +79,48 @@ function validateFolder(files: File[]): { model?: File; textures: TextureFile[]; return result } -function uploadFolder( +async function uploadFolder( folder: FolderEntry, secret: string, - onProgress: (pct: number) => void, - xhrRef: { current: XMLHttpRequest | null } + onProgress: (pct: number) => void ): Promise<{ success: boolean; filename?: string; error?: string }> { - return new Promise((resolve) => { - const totalFiles = 1 + folder.textures.length - let completed = 0 - - const checkDone = () => { - completed++ - onProgress(Math.round((completed / totalFiles) * 100)) - if (completed >= totalFiles) { - resolve({ success: true, filename: folder.folderName }) - } + const formData = new FormData() + formData.append('folderName', folder.folderName) + + // Model file + formData.append('files', folder.modelFile) + formData.append('fileTypes', 'model') + formData.append('textureNames', '') + + // Texture files + for (const tex of folder.textures) { + formData.append('files', tex.file) + formData.append('fileTypes', 'texture') + formData.append('textureNames', tex.name) + } + + onProgress(10) + + try { + const res = await fetch('/api/upload', { + method: 'POST', + headers: { 'x-upload-secret': secret.trim() }, + body: formData, + }) + + onProgress(80) + + const data = await res.json() + + if (!data.success) { + return { success: false, error: data.error } } - - const formData = new FormData() - formData.append('folderName', folder.folderName) - formData.append('file', folder.modelFile) - formData.append('fileType', 'model') - - for (const tex of folder.textures) { - const texForm = new FormData() - texForm.append('folderName', folder.folderName) - texForm.append('file', tex.file) - texForm.append('fileType', 'texture') - texForm.append('textureName', tex.name) - - const xhr = new XMLHttpRequest() - xhrRef.current = xhr - - xhr.onload = () => { - try { - const res = JSON.parse(xhr.responseText) - if (!res.success) { - resolve({ success: false, error: `Texture ${tex.name} : ${res.error}` }) - } else { - checkDone() - } - } catch { - checkDone() - } - } - xhr.onerror = () => resolve({ success: false, error: `Erreur réseau: ${tex.name}` }) - - xhr.open('POST', '/api/upload') - xhr.setRequestHeader('x-upload-secret', secret.trim()) - xhr.send(texForm) - } - - const modelXhr = new XMLHttpRequest() - xhrRef.current = modelXhr - - modelXhr.onload = () => { - try { - const res = JSON.parse(modelXhr.responseText) - if (!res.success) { - resolve({ success: false, error: res.error }) - } else { - checkDone() - } - } catch { - checkDone() - } - } - modelXhr.onerror = () => resolve({ success: false, error: 'Erreur réseau: model' }) - - modelXhr.open('POST', '/api/upload') - modelXhr.setRequestHeader('x-upload-secret', secret.trim()) - modelXhr.send(formData) - }) + + onProgress(100) + return { success: true, filename: folder.folderName } + } catch { + return { success: false, error: 'Erreur reseau' } + } } export default function UploadZone() { @@ -160,19 +129,23 @@ export default function UploadZone() { const [secret, setSecret] = useState('') const [secretVisible, setSecretVisible] = useState(false) const [globalError, setGlobalError] = useState(null) - const xhrRef = useRef(null) + const [secretError, setSecretError] = useState(null) + const [abortController, setAbortController] = useState(null) + + const isSecretEmpty = !secret.trim() const updateFile = (index: number, patch: Partial) => { setFiles((prev) => prev.map((f, i) => i === index ? { ...f, ...patch } : f)) } - const handleUpload = useCallback(async () => { + const handleUpload = async () => { if (!secret.trim()) { - setGlobalError('Veuillez entrer la clé d\'accès avant d\'uploader.') + setSecretError('La cle d\'acces est requise') return } if (files.length === 0) return + setSecretError(null) setIsUploading(true) setGlobalError(null) @@ -184,8 +157,7 @@ export default function UploadZone() { const result = await uploadFolder( files[i], secret, - (pct) => updateFile(i, { progress: pct }), - xhrRef + (pct) => updateFile(i, { progress: pct }) ) updateFile(i, { @@ -197,9 +169,9 @@ export default function UploadZone() { } setIsUploading(false) - }, [files, secret]) + } - const handleCancel = () => { xhrRef.current?.abort() } + const handleCancel = () => { abortController?.abort() } const removeFile = (index: number) => { const file = files[index] @@ -222,18 +194,25 @@ export default function UploadZone() { return (
- +
setSecret(e.target.value)} - placeholder="Enter secret key..." + onChange={(e) => { + setSecret(e.target.value) + if (secretError) setSecretError(null) + }} + placeholder="Entrez la cle secrete..." disabled={isUploading} - className="w-full bg-black-800 border border-white/30 rounded-xl px-4 py-2.5 pr-12 + className={`w-full bg-black-800 border rounded-xl px-4 py-2.5 pr-12 text-gray-100 placeholder-gray-500 text-sm - focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-white/50 - disabled:opacity-50 disabled:cursor-not-allowed transition" + focus:outline-none focus:ring-2 focus:border-white/50 + disabled:opacity-50 disabled:cursor-not-allowed transition + ${secretError + ? 'border-red-500/70 focus:ring-red-500/50' + : 'border-white/30 focus:ring-white/50' + }`} />
+ {secretError && ( +

{secretError}

+ )}

- Drop ton dossier ici - ou click pour parcourir + Deposez votre dossier ici + ou cliquez pour parcourir

- Contient: model.glb/gltf + textures (roughness, normal, metalness, color, displace) + Contenu attendu : model.glb/gltf + textures (roughness, normal, metalness, color, displace)

)} @@ -366,10 +348,10 @@ export default function UploadZone() {
{entry.folderName}/ - Folder + Dossier
- model: {entry.modelFile.name} + modele : {entry.modelFile.name} {entry.status === 'error' && entry.error && ( {entry.error} )} @@ -405,15 +387,15 @@ export default function UploadZone() { - Textures manquantes: {entry.warnings.join(', ')} + Textures manquantes : {entry.warnings.join(', ')}
)} {entry.modelUrl && entry.status !== 'success' && (
f.status === 'pending' || f.status === 'error') && ( )} @@ -448,7 +433,7 @@ export default function UploadZone() { py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150 hover:bg-black-600" > - Cancel + Annuler )} @@ -459,7 +444,7 @@ export default function UploadZone() { py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150 hover:bg-black-600" > - {allDone ? 'Clear All' : 'Retry'} + {allDone ? 'Tout effacer' : 'Reessayer'} )}