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

upadte: clean code + add next cloud

Browse Source
This commit is contained in:
Tom Boullay
2026-04-14 16:21:37 +02:00
parent 3adcf9d30e
commit 3a7a5e2eea
20 changed files with 663 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/UploadZone.tsx
+183 -24
View File
@@ -1,8 +1,7 @@
'use client'
import { useState, useRef } from 'react'
import { useState, useRef, useCallback } from 'react'
import type { Destination } from '@/lib/constants'
import { DESTINATIONS } from '@/lib/constants'
import type { FolderEntry } from '@/lib/client-types'
import type { FileDiff } from '@/lib/types'
import { useSecret } from '@/hooks/useSecret'
@@ -14,11 +13,11 @@ import FolderCard from './upload/FolderCard'
import ActionButtons from './upload/ActionButtons'
import OverwriteConfirmModal from './upload/OverwriteConfirmModal'
import NoChangesModal from './upload/NoChangesModal'
import DriveErrorModal from './upload/DriveErrorModal'
// ---------------------------------------------------------------------------
// API helpers
// ---------------------------------------------------------------------------
interface CheckResult {
exists: boolean
diffs: FileDiff[]
@@ -48,15 +47,13 @@ async function checkFolderDiffs(
const localNames = new Set<string>()
// Model: skip size comparison (compression changes the size).
// We only check if it exists on remote or not.
const modelKey = folder.modelFile.name.toLowerCase()
localNames.add(modelKey)
if (!remoteMap.has(modelKey)) {
diffs.push({ name: folder.modelFile.name, status: 'new' })
}
// If model exists on remote → don't add to diffs (we can't know if it changed)
// Textures: compare by size (not compressed, so size is reliable)
// Textures: compare by size
for (const tex of folder.textures) {
const key = tex.name.toLowerCase()
localNames.add(key)
@@ -68,7 +65,7 @@ async function checkFolderDiffs(
}
}
// Files on remote but not in local → deleted
// Deleted
for (const [name] of remoteMap) {
if (!localNames.has(name)) {
diffs.push({ name, status: 'deleted' })
@@ -81,7 +78,49 @@ async function checkFolderDiffs(
}
}
async function uploadFolder(
/** Upload original files to Nextcloud Drive (no Blender compression). */
async function uploadDrive(
folder: FolderEntry,
secret: string,
destination: string,
action: 'new' | 'replace',
signal?: AbortSignal,
): Promise<{ success: boolean; error?: string }> {
const formData = new FormData()
formData.append('folderName', folder.folderName)
formData.append('destination', destination)
formData.append('action', action)
formData.append('files', folder.modelFile)
formData.append('fileTypes', 'model')
formData.append('textureNames', '')
for (const tex of folder.textures) {
formData.append('files', tex.file)
formData.append('fileTypes', 'texture')
formData.append('textureNames', tex.name)
}
try {
const res = await fetch('/api/upload/drive', {
method: 'POST',
headers: { 'x-upload-secret': secret.trim() },
body: formData,
signal,
})
const data = await res.json()
if (!data.success) return { success: false, error: data.error }
return { success: true }
} catch (err) {
if (err instanceof DOMException && err.name === 'AbortError') {
return { success: false, error: 'Upload annule' }
}
return { success: false, error: 'Erreur reseau (Drive)' }
}
}
/** Upload files to GitHub (with Blender compression). */
async function uploadGit(
folder: FolderEntry,
secret: string,
destination: string,
@@ -132,7 +171,6 @@ async function uploadFolder(
// ---------------------------------------------------------------------------
// UploadZone — orchestrator
// ---------------------------------------------------------------------------
export default function UploadZone() {
const {
secret,
@@ -156,14 +194,24 @@ export default function UploadZone() {
const [isUploading, setIsUploading] = useState(false)
const [globalError, setGlobalError] = useState<string | null>(null)
const [destination, setDestination] = useState<Destination>(DESTINATIONS[0].value)
const [destination, setDestination] = useState<Destination | null>(null)
const [overwriteConfirm, setOverwriteConfirm] = useState<{
folderName: string
diffs: FileDiff[]
} | null>(null)
const [noChangesFolder, setNoChangesFolder] = useState<string | null>(null)
// Drive error modal state
const [driveError, setDriveError] = useState<{
error: string
folderIndex: number
} | null>(null)
const abortRef = useRef<AbortController | null>(null)
// Tracks the check result so we know if it's "new" or "replace" for the Drive
const checkResultRef = useRef<CheckResult>({ exists: false, diffs: [] })
// -- Handlers --
const handleFolderSelected = (entry: FolderEntry) => {
@@ -183,13 +231,19 @@ export default function UploadZone() {
setSecretError("La cle d'acces est requise")
return
}
if (!destination) {
setGlobalError('Veuillez choisir une destination')
return
}
if (entries.length === 0) return
setSecretError(null)
setGlobalError(null)
const folder = entries[0]
const check = await checkFolderDiffs(folder, destination, secret, abortRef.current?.signal)
const check = await checkFolderDiffs(folder, destination!, secret, abortRef.current?.signal)
checkResultRef.current = check
if (check.exists) {
if (check.diffs.length === 0) {
setNoChangesFolder(folder.folderName)
@@ -202,6 +256,10 @@ export default function UploadZone() {
await proceedUpload()
}
/**
* Main upload flow: Drive first, then Git.
* If Drive fails, show DriveErrorModal so user can decide.
*/
const proceedUpload = async () => {
setOverwriteConfirm(null)
setIsUploading(true)
@@ -214,28 +272,118 @@ export default function UploadZone() {
if (entries[i].status === 'success') continue
if (controller.signal.aborted) break
updateEntry(i, { status: 'uploading', progress: 0, error: undefined })
const folderEntry = entries[i]
const driveAction = checkResultRef.current.exists ? 'replace' : 'new'
const result = await uploadFolder(
entries[i],
// ---- Step 1: Drive upload ----
updateEntry(i, {
status: 'uploading',
progress: 0,
error: undefined,
driveStatus: 'uploading',
driveError: undefined,
})
const driveResult = await uploadDrive(
folderEntry,
secret,
destination,
(pct) => updateEntry(i, { progress: pct }),
destination!,
driveAction as 'new' | 'replace',
controller.signal,
)
updateEntry(i, {
status: result.success ? 'success' : 'error',
progress: result.success ? 100 : 0,
error: result.success ? undefined : result.error,
filename: result.filename,
})
if (!driveResult.success) {
// Drive failed — pause and ask user
updateEntry(i, { driveStatus: 'error', driveError: driveResult.error })
setDriveError({ error: driveResult.error || 'Erreur inconnue', folderIndex: i })
// Stop here — the DriveErrorModal callbacks will resume or cancel
return
}
updateEntry(i, { driveStatus: 'success' })
// ---- Step 2: Git upload ----
await pushGit(i, controller.signal)
}
abortRef.current = null
setIsUploading(false)
}
/** Push a single folder to Git. Called after Drive succeeds or user skips Drive. */
const pushGit = async (index: number, signal?: AbortSignal) => {
const folderEntry = entries[index]
updateEntry(index, { progress: 5 })
const gitResult = await uploadGit(
folderEntry,
secret,
destination!,
(pct) => updateEntry(index, { progress: pct }),
signal,
)
updateEntry(index, {
status: gitResult.success ? 'success' : 'error',
progress: gitResult.success ? 100 : 0,
error: gitResult.success ? undefined : gitResult.error,
filename: gitResult.filename,
})
}
/** User chose "Continue without Drive" in DriveErrorModal. */
const handleDriveContinue = useCallback(async () => {
if (!driveError) return
const idx = driveError.folderIndex
setDriveError(null)
updateEntry(idx, { driveStatus: 'skipped' })
// Continue with Git
const signal = abortRef.current?.signal
await pushGit(idx, signal)
// Continue with remaining entries
for (let i = idx + 1; i < entries.length; i++) {
if (entries[i].status === 'success') continue
if (abortRef.current?.signal.aborted) break
// For subsequent entries after a Drive skip, also skip Drive
updateEntry(i, {
status: 'uploading',
progress: 0,
error: undefined,
driveStatus: 'skipped',
})
await pushGit(i, abortRef.current?.signal)
}
abortRef.current = null
setIsUploading(false)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [driveError, entries, secret, destination])
/** User chose "Cancel" in DriveErrorModal. */
const handleDriveCancel = useCallback(() => {
if (!driveError) return
const idx = driveError.folderIndex
setDriveError(null)
updateEntry(idx, {
status: 'error',
progress: 0,
error: 'Upload annule (Drive echoue)',
driveStatus: 'error',
})
abortRef.current?.abort()
abortRef.current = null
setIsUploading(false)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [driveError])
const handleCancel = () => {
abortRef.current?.abort()
abortRef.current = null
@@ -246,6 +394,8 @@ export default function UploadZone() {
resetEntries()
setGlobalError(null)
setIsUploading(false)
setDriveError(null)
checkResultRef.current = { exists: false, diffs: [] }
}
const hasPendingOrErrors = entries.some((f) => f.status === 'pending' || f.status === 'error')
@@ -298,6 +448,7 @@ export default function UploadZone() {
<ActionButtons
isUploading={isUploading}
isSecretEmpty={isSecretEmpty}
noDestination={!destination}
hasPendingOrErrors={hasPendingOrErrors}
allDone={allDone}
hasErrors={hasErrors}
@@ -308,7 +459,7 @@ export default function UploadZone() {
{overwriteConfirm && (
<OverwriteConfirmModal
destination={destination}
destination={destination!}
folderName={overwriteConfirm.folderName}
diffs={overwriteConfirm.diffs}
onCancel={() => setOverwriteConfirm(null)}
@@ -318,7 +469,7 @@ export default function UploadZone() {
{noChangesFolder && (
<NoChangesModal
destination={destination}
destination={destination!}
folderName={noChangesFolder}
onCancel={() => {
setNoChangesFolder(null)
@@ -327,6 +478,14 @@ export default function UploadZone() {
onModify={() => setNoChangesFolder(null)}
/>
)}
{driveError && (
<DriveErrorModal
error={driveError.error}
onCancel={handleDriveCancel}
onContinue={handleDriveContinue}
/>
)}
</div>
)
}
components/upload/ActionButtons.tsx
+7 -3
View File
@@ -1,6 +1,7 @@
interface ActionButtonsProps {
isUploading: boolean
isSecretEmpty: boolean
noDestination: boolean
hasPendingOrErrors: boolean
allDone: boolean
hasErrors: boolean
@@ -12,6 +13,7 @@ interface ActionButtonsProps {
export default function ActionButtons({
isUploading,
isSecretEmpty,
noDestination,
hasPendingOrErrors,
allDone,
hasErrors,
@@ -19,20 +21,22 @@ export default function ActionButtons({
onCancel,
onReset,
}: ActionButtonsProps) {
const cantUpload = isSecretEmpty || noDestination
return (
<div className="flex gap-3">
{!isUploading && hasPendingOrErrors && (
<button
onClick={onUpload}
disabled={isSecretEmpty}
disabled={cantUpload}
className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl transition-all duration-150
focus:outline-none focus:ring-2 focus:ring-white/50 border border-white/20
${isSecretEmpty
${cantUpload
? 'bg-white/30 text-gray-500 cursor-not-allowed'
: 'bg-white text-[#000000] hover:bg-gray-200'
}`}
>
Envoyer sur GitHub
Envoyer
</button>
)}
components/upload/DestinationPicker.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { DESTINATIONS } from '@/lib/constants'
import type { Destination } from '@/lib/constants'
interface DestinationPickerProps {
destination: Destination
destination: Destination | null
disabled: boolean
onChange: (value: Destination) => void
}
components/upload/DriveErrorModal.tsx
+69
View File
@@ -0,0 +1,69 @@
interface DriveErrorModalProps {
error: string
onCancel: () => void
onContinue: () => void
}
export default function DriveErrorModal({
error,
onCancel,
onContinue,
}: DriveErrorModalProps) {
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
role="dialog"
aria-modal="true"
aria-labelledby="drive-error-title"
>
<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-red-900/30 flex items-center justify-center shrink-0">
<svg className="w-5 h-5 text-red-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 id="drive-error-title" className="text-sm font-semibold text-gray-100">
Erreur Drive
</h3>
<p className="text-xs text-gray-400 mt-0.5">
L&apos;archivage sur le Drive a echoue. Les fichiers n&apos;ont pas ete versionnes.
</p>
</div>
</div>
<div className="bg-black-800 border border-white/10 rounded-xl p-3">
<p className="text-xs text-red-400 font-mono break-all">{error}</p>
</div>
<p className="text-xs text-gray-400">
Voulez-vous quand meme envoyer les fichiers aux devs via GitHub ?
</p>
<div className="flex gap-3">
<button
onClick={onCancel}
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={onContinue}
className="flex-1 bg-white text-[#000000] font-medium text-sm
py-2.5 px-4 rounded-xl transition-colors duration-150
hover:bg-gray-200"
>
Envoyer sur Git seulement
</button>
</div>
</div>
</div>
)
}
components/upload/FolderCard.tsx
+40 -1
View File
@@ -67,9 +67,48 @@ export default function FolderCard({ entry, index, onToggleViewer, onRemove }: F
<span className="text-xs text-red-400 truncate">{entry.error}</span>
)}
{entry.status === 'success' && entry.filename && (
<span className="text-xs text-green-400 font-mono">{entry.filename}</span>
<span className="text-xs text-green-400 font-mono">Drive + Git OK</span>
)}
</div>
{/* Drive status sub-line */}
{entry.driveStatus && entry.driveStatus !== 'pending' && (
<div className="flex items-center gap-1.5 mt-0.5">
{entry.driveStatus === 'uploading' && (
<>
<svg className="w-3 h-3 text-gray-400 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>
<span className="text-xs text-gray-400">Drive en cours...</span>
</>
)}
{entry.driveStatus === 'success' && (
<>
<svg className="w-3 h-3 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>
<span className="text-xs text-green-400">Drive OK</span>
</>
)}
{entry.driveStatus === 'error' && (
<>
<svg className="w-3 h-3 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>
<span className="text-xs text-red-400 truncate">Drive echoue{entry.driveError ? ` : ${entry.driveError}` : ''}</span>
</>
)}
{entry.driveStatus === 'skipped' && (
<>
<svg className="w-3 h-3 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01" />
</svg>
<span className="text-xs text-yellow-400">Drive ignore</span>
</>
)}
</div>
)}
{entry.status === 'uploading' && (
<div className="mt-1.5 w-full h-1 bg-black-700 rounded-full overflow-hidden">
<div
components/upload/FolderDropzone.tsx
+1
View File
@@ -80,6 +80,7 @@ export default function FolderDropzone({
</p>
<p className="text-xs text-gray-500 mt-1">
Contenu attendu : model.glb/gltf + textures (roughness, normal, metalness, color, displace)
<br />Les originaux sont archives sur le Drive, les comprimes sont envoyes sur Git.
</p>
</div>
</>
components/upload/NoChangesModal.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export default function NoChangesModal({
Aucun changement detecte
</h3>
<p className="text-xs text-gray-400 mt-0.5">
Le dossier <span className="font-mono text-gray-300">{destination}/{folderName}</span> est identique au contenu distant.
Le dossier <span className="font-mono text-gray-300">{destination}/{folderName}</span> est identique au contenu distant. Rien a envoyer.
</p>
</div>
</div>
components/upload/OverwriteConfirmModal.tsx
+2 -1
View File
@@ -38,7 +38,8 @@ export default function OverwriteConfirmModal({
Dossier deja existant
</h3>
<p className="text-xs text-gray-400 mt-0.5">
<span className="font-mono text-yellow-400">{destination}/{folderName}</span> existe deja sur le repo
<span className="font-mono text-yellow-400">{destination}/{folderName}</span> existe deja.
Les anciens fichiers seront archives sur le Drive, puis les nouveaux seront envoyes sur le Drive et Git.
</p>
</div>
</div>