math-pixel/upload-gltf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: add gitgnore

Browse Source
This commit is contained in:
Tom Boullay
2026-04-03 10:41:56 +02:00
parent a730946ad2
commit 5007a255da
9 changed files with 427 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/UploadZone.tsx
+66 -93
View File
@@ -3,9 +3,6 @@
import { useCallback, useRef, useState } from 'react'
import { useDropzone, FileRejection } from 'react-dropzone'
// ─────────────────────────────────────────────
// Types
// ─────────────────────────────────────────────
type FileStatus = 'pending' | 'uploading' | 'success' | 'error'
interface FileEntry {
@@ -25,9 +22,6 @@ interface UploadResult {
gitError?: string
}
// ─────────────────────────────────────────────
// Formats acceptés
// ─────────────────────────────────────────────
const ACCEPTED_FORMATS = {
'model/gltf-binary': ['.glb'],
'model/gltf+json': ['.gltf'],
@@ -80,12 +74,12 @@ function uploadSingleFile(
try {
resolve(JSON.parse(xhr.responseText))
} catch {
resolve({ success: false, error: `Réponse inattendue (HTTP ${xhr.status})` })
resolve({ success: false, error: `Unexpected response (HTTP ${xhr.status})` })
}
}
xhr.onerror = () => resolve({ success: false, error: 'Erreur réseau.' })
xhr.onabort = () => resolve({ success: false, error: 'Annulé.' })
xhr.onerror = () => resolve({ success: false, error: 'Network error.' })
xhr.onabort = () => resolve({ success: false, error: 'Cancelled.' })
xhr.open('POST', '/api/upload')
xhr.setRequestHeader('x-upload-secret', secret.trim())
@@ -93,9 +87,6 @@ function uploadSingleFile(
})
}
// ─────────────────────────────────────────────
// Composant principal
// ─────────────────────────────────────────────
export default function UploadZone() {
const [files, setFiles] = useState<FileEntry[]>([])
const [isUploading, setIsUploading] = useState(false)
@@ -109,10 +100,9 @@ export default function UploadZone() {
setFiles((prev) => prev.map((f, i) => i === index ? { ...f, ...patch } : f))
}
// ── Upload séquentiel de tous les fichiers ──
const handleUpload = useCallback(async () => {
if (!secret.trim()) {
setGlobalError('Veuillez saisir la clé d\'accès avant d\'uploader.')
setGlobalError('Please enter the access key before uploading.')
return
}
if (files.length === 0) return
@@ -144,38 +134,33 @@ export default function UploadZone() {
setIsUploading(false)
}, [files, secret, assetName])
// ── Annuler le fichier en cours ──
const handleCancel = () => { xhrRef.current?.abort() }
// ── Supprimer un fichier de la liste ──
const removeFile = (index: number) => {
setFiles((prev) => prev.filter((_, i) => i !== index))
}
// ── Reset total ──
const handleReset = () => {
setFiles([])
setGlobalError(null)
setIsUploading(false)
}
// ── react-dropzone ──
const onDrop = useCallback((acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
if (rejectedFiles.length > 0) {
const codes = rejectedFiles[0].errors.map((e) => e.code).join(', ')
setGlobalError(
codes.includes('file-invalid-type')
? `Format non supporté. Utilisez : ${ALL_EXTENSIONS.join(', ')}`
? `Unsupported format. Use: ${ALL_EXTENSIONS.join(', ')}`
: codes.includes('file-too-large')
? 'Fichier trop volumineux (max 2 GB)'
: `Fichier rejeté : ${codes}`
? 'File too large (max 2 GB)'
: `File rejected: ${codes}`
)
return
}
setGlobalError(null)
setFiles((prev) => {
// Dédoublonner par nom
const existingNames = new Set(prev.map((f) => f.file.name))
const newEntries: FileEntry[] = acceptedFiles
.filter((f) => !existingNames.has(f.name))
@@ -195,31 +180,26 @@ export default function UploadZone() {
const allDone = files.length > 0 && files.every((f) => f.status === 'success')
const hasErrors = files.some((f) => f.status === 'error')
// ─────────────────────────────────────────────
// Render
// ─────────────────────────────────────────────
return (
<div className="w-full max-w-2xl space-y-4">
{/* Clé d'accès */}
<div className="space-y-1.5">
<label className="block text-sm font-medium text-gray-700">Clé d&apos;accès</label>
<label className="block text-sm font-medium text-gray-300">Access Key</label>
<div className="relative">
<input
type={secretVisible ? 'text' : 'password'}
value={secret}
onChange={(e) => setSecret(e.target.value)}
placeholder="Saisir la clé secrète…"
placeholder="Enter secret key..."
disabled={isUploading}
className="w-full bg-white border border-surface-border rounded-xl px-4 py-2.5 pr-12
text-gray-800 placeholder-gray-300 text-sm shadow-soft
focus:outline-none focus:ring-2 focus:ring-brand-300 focus:border-brand-400
className="w-full bg-black-800 border border-black-700 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-gray-600 focus:border-gray-500
disabled:opacity-50 disabled:cursor-not-allowed transition"
/>
<button
type="button"
onClick={() => setSecretVisible((v) => !v)}
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-brand-500 transition"
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300 transition"
tabIndex={-1}
>
{secretVisible ? (
@@ -236,43 +216,41 @@ export default function UploadZone() {
</div>
</div>
{/* Nom de l'asset */}
<div className="space-y-1.5">
<label className="block text-sm font-medium text-gray-700">
Nom de l&apos;asset
<span className="text-gray-400 font-normal ml-2">— nom commun pour le modèle et la texture</span>
<label className="block text-sm font-medium text-gray-300">
Asset Name
<span className="text-gray-500 font-normal ml-2">— common name for model and texture</span>
</label>
<input
type="text"
value={assetName}
onChange={(e) => setAssetName(e.target.value)}
placeholder="ex : clocher, sol_pierre, mur_brique…"
placeholder="e.g., tower, stone_floor, brick_wall..."
disabled={isUploading}
className="w-full bg-white border border-surface-border rounded-xl px-4 py-2.5
text-gray-800 placeholder-gray-300 text-sm font-mono shadow-soft
focus:outline-none focus:ring-2 focus:ring-brand-300 focus:border-brand-400
className="w-full bg-black-800 border border-black-700 rounded-xl px-4 py-2.5
text-gray-100 placeholder-gray-500 text-sm font-mono
focus:outline-none focus:ring-2 focus:ring-gray-600 focus:border-gray-500
disabled:opacity-50 disabled:cursor-not-allowed transition"
/>
</div>
{/* Dropzone */}
<div
{...getRootProps()}
className={`
relative border-2 border-dashed rounded-2xl p-8 text-center cursor-pointer transition-all duration-200 bg-white shadow-soft
${isUploading ? 'cursor-not-allowed opacity-60 border-surface-border' : ''}
${isDragReject ? 'border-red-400 bg-red-50' : ''}
${isDragActive && !isDragReject ? 'border-brand-400 bg-brand-50 scale-[1.01]' : ''}
relative border-2 border-dashed rounded-2xl p-8 text-center cursor-pointer transition-all duration-200 bg-black-800
${isUploading ? 'cursor-not-allowed opacity-60 border-black-700' : ''}
${isDragReject ? 'border-red-500 bg-red-900/20' : ''}
${isDragActive && !isDragReject ? 'border-gray-400 bg-black-700 scale-[1.01]' : ''}
${!isDragActive && !isDragReject && !isUploading
? 'border-surface-border hover:border-brand-300 hover:bg-brand-50/40'
? 'border-black-600 hover:border-gray-500 hover:bg-black-700'
: ''}
`}
>
<input {...getInputProps()} />
<div className="flex justify-center mb-3">
<div className={`w-12 h-12 rounded-full flex items-center justify-center transition
${isDragActive ? 'bg-brand-200' : 'bg-brand-100'}`}>
<svg className={`w-6 h-6 transition ${isDragActive ? 'text-brand-600' : 'text-brand-500'}`}
${isDragActive ? 'bg-gray-700' : 'bg-black-700'}`}>
<svg className={`w-6 h-6 transition ${isDragActive ? 'text-white' : 'text-gray-400'}`}
fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round"
d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
@@ -280,102 +258,96 @@ export default function UploadZone() {
</div>
</div>
{isDragReject ? (
<p className="text-sm font-medium text-red-500">Format non supporté</p>
<p className="text-sm font-medium text-red-400">Unsupported format</p>
) : isDragActive ? (
<p className="text-sm font-medium text-brand-600">Relâchez pour ajouter</p>
<p className="text-sm font-medium text-gray-200">Release to add</p>
) : (
<>
<p className="text-sm font-medium text-gray-600">
Glissez vos fichiers ici
<span className="text-gray-400 font-normal"> ou cliquez pour parcourir</span>
<p className="text-sm font-medium text-gray-300">
Drag files here
<span className="text-gray-500 font-normal"> or click to browse</span>
</p>
<p className="text-xs text-gray-400 mt-1">
Modèles : .glb, .gltf, .fbx · Textures : .png, .jpg, .webp, .ktx2
<p className="text-xs text-gray-500 mt-1">
Models: .glb, .gltf, .fbx · Textures: .png, .jpg, .webp, .ktx2
</p>
</>
)}
</div>
{/* Erreur globale */}
{globalError && (
<p className="text-xs text-red-500 text-center">{globalError}</p>
<p className="text-xs text-red-400 text-center">{globalError}</p>
)}
{/* Liste des fichiers */}
{files.length > 0 && (
<div className="space-y-2">
{files.map((entry, i) => {
const type = getFileType(entry.file.name)
return (
<div key={`${entry.file.name}-${i}`}
className="flex items-center gap-3 bg-white border border-surface-border rounded-xl px-4 py-3 shadow-soft">
className="flex items-center gap-3 bg-black-800 border border-black-700 rounded-xl px-4 py-3">
{/* Icône statut */}
<div className="shrink-0">
{entry.status === 'success' ? (
<div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
<svg className="w-4 h-4 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
<div className="w-8 h-8 rounded-full bg-green-900/30 flex items-center justify-center">
<svg className="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
) : entry.status === 'error' ? (
<div className="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center">
<svg className="w-4 h-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
<div className="w-8 h-8 rounded-full bg-red-900/30 flex items-center justify-center">
<svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
) : entry.status === 'uploading' ? (
<div className="w-8 h-8 rounded-full bg-brand-100 flex items-center justify-center">
<svg className="w-4 h-4 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
<div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
<svg className="w-4 h-4 text-gray-300 animate-spin" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
</svg>
</div>
) : (
<div className="w-8 h-8 rounded-full bg-surface-muted flex items-center justify-center">
<svg className="w-4 h-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<div className="w-8 h-8 rounded-full bg-black-700 flex items-center justify-center">
<svg className="w-4 h-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
</svg>
</div>
)}
</div>
{/* Infos fichier */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<span className="text-sm text-gray-700 font-mono truncate">{entry.file.name}</span>
<span className="text-sm text-gray-200 font-mono truncate">{entry.file.name}</span>
{type && (
<span className={`shrink-0 text-xs px-1.5 py-0.5 rounded-full
${type === 'model' ? 'bg-brand-100 text-brand-600' : 'bg-rose-100 text-rose-500'}`}>
${type === 'model' ? 'bg-gray-700 text-gray-300' : 'bg-gray-700 text-gray-300'}`}>
{type === 'model' ? '3D' : 'Texture'}
</span>
)}
</div>
<div className="flex items-center gap-2 mt-0.5">
<span className="text-xs text-gray-400">{formatBytes(entry.file.size)}</span>
<span className="text-xs text-gray-500">{formatBytes(entry.file.size)}</span>
{entry.status === 'error' && entry.error && (
<span className="text-xs text-red-400 truncate">{entry.error}</span>
)}
{entry.status === 'success' && entry.filename && (
<span className="text-xs text-green-500 font-mono">{entry.filename}</span>
<span className="text-xs text-green-400 font-mono">{entry.filename}</span>
)}
</div>
{/* Barre de progression individuelle */}
{entry.status === 'uploading' && (
<div className="mt-1.5 w-full h-1 bg-brand-100 rounded-full overflow-hidden">
<div className="mt-1.5 w-full h-1 bg-black-700 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-brand rounded-full transition-all duration-200"
className="h-full bg-gray-400 rounded-full transition-all duration-200"
style={{ width: `${entry.progress}%` }}
/>
</div>
)}
</div>
{/* Supprimer */}
{entry.status !== 'uploading' && (
<button
onClick={() => removeFile(i)}
className="shrink-0 text-gray-300 hover:text-red-400 transition"
className="shrink-0 text-gray-600 hover:text-red-400 transition"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -388,41 +360,42 @@ export default function UploadZone() {
</div>
)}
{/* Boutons d'action */}
<div className="flex gap-3">
{!isUploading && files.some((f) => f.status === 'pending' || f.status === 'error') && (
<button
onClick={handleUpload}
className="flex-1 bg-gradient-brand hover:opacity-90 text-white font-medium text-sm
py-2.5 px-6 rounded-xl shadow-soft transition-opacity duration-150
focus:outline-none focus:ring-2 focus:ring-brand-300"
className="flex-1 bg-white text-black font-medium text-sm
py-2.5 px-6 rounded-xl transition-opacity duration-150
hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400"
>
Uploader {files.filter(f => f.status !== 'success').length > 1
? `${files.filter(f => f.status !== 'success').length} fichiers`
: 'le fichier'} &amp; Pousser sur Git
Upload {files.filter(f => f.status !== 'success').length > 1
? `${files.filter(f => f.status !== 'success').length} files`
: 'file'} & Push to Git
</button>
)}
{isUploading && (
<button
onClick={handleCancel}
className="flex-1 bg-surface-muted hover:bg-brand-100 text-gray-600 font-medium text-sm
py-2.5 px-6 rounded-xl border border-surface-border transition-colors duration-150"
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
hover:bg-black-600"
>
Annuler le fichier en cours
Cancel
</button>
)}
{(allDone || hasErrors) && !isUploading && (
<button
onClick={handleReset}
className="flex-1 bg-surface-muted hover:bg-brand-100 text-gray-600 font-medium text-sm
py-2.5 px-6 rounded-xl border border-surface-border transition-colors duration-150"
className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
hover:bg-black-600"
>
{allDone ? 'Tout effacer' : 'Réessayer'}
{allDone ? 'Clear All' : 'Retry'}
</button>
)}
</div>
</div>
)
}
}