\n \n \n \n\n",[],[135,174],"7c0c2148-2fe8-49b5-898f-7dad50cc6d56","favicon.svg","019f9064-4c02-764f-ace7-097ca6b7c3f6",["D",1784833920008],"\n",[],[135,182],"25c25727-eeab-4c78-89fc-9e9dc2223f63","UploadZone.tsx","914d0262-86ca-11f1-babb-1607ee4eb77e","019f9064-4c01-75ff-86ac-58518f2af3ee",10,["D",1784834000416],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface UploadZoneProps {\n onUploaded: () => void;\n}\n\nexport function UploadZone({ onUploaded }: UploadZoneProps) {\n const [dragging, setDragging] = useState(false);\n const [uploading, setUploading] = useState(false);\n const [progress, setProgress] = useState(null);\n const inputRef = useRef(null);\n\n const uploadFile = useCallback(\n async (file: File) => {\n setUploading(true);\n setProgress(`Uploading ${file.name}…`);\n try {\n const formData = new FormData();\n formData.append(\"file\", file);\n const res = await fetch(\"/api/upload\", { method: \"POST\", body: formData });\n if (!res.ok) {\n const err = await res.json();\n throw new Error(err.error || \"Upload failed\");\n }\n setProgress(`✓ ${file.name} uploaded`);\n onUploaded();\n setTimeout(() => setProgress(null), 3000);\n } catch (err) {\n setProgress(\n `✗ Failed: ${err instanceof Error ? err.message : \"Unknown error\"}`,\n );\n } finally {\n setUploading(false);\n }\n },\n [onUploaded],\n );\n\n const handleFiles = useCallback(\n (fileList: FileList | null) => {\n if (!fileList || fileList.length === 0) return;\n // Upload each file sequentially\n (async () => {\n for (const file of Array.from(fileList)) {\n await uploadFile(file);\n }\n })();\n },\n [uploadFile],\n );\n\n const handleDrop = useCallback(\n (e: React.DragEvent) => {\n e.preventDefault();\n setDragging(false);\n handleFiles(e.dataTransfer.files);\n },\n [handleFiles],\n );\n\n return (\n

\n inputRef.current?.click()}\n onDragOver={(e) => {\n e.preventDefault();\n setDragging(true);\n }}\n onDragLeave={() => setDragging(false)}\n onDrop={handleDrop}\n class={`cursor-pointer rounded-xl border-2 border-dashed p-8 text-center transition-colors ${\n dragging\n ? \"border-blue-500 bg-blue-50\"\n : \"border-gray-300 bg-white hover:border-gray-400\"\n }`}\n >\n

📤

\n {dragging ? \"Drop files here\" : \"Click or drag files to upload\"}\n

\n Any file type — stored in Val Town blob storage\n

\n handleFiles(e.target.files)}\n />\n

\n\n {progress && (\n

\n {uploading && (\n \n )}\n {progress}\n

\n )}\n \n );\n}\n",[],[135,197,189],"components","fb49eafe-d892-429f-8877-5ae9f016da5d","FileList.tsx","9154c434-86ca-11f1-b368-1607ee4eb77e",["D",1784834000441],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback } from \"https://esm.sh/react@18.2.0\";\n\nexport interface FileMeta {\n id: string;\n name: string;\n size: number;\n type: string;\n uploaded_at: string;\n}\n\ninterface FileListProps {\n files: FileMeta[];\n onDeleted: () => void;\n}\n\nfunction formatSize(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;\n}\n\nfunction formatDate(iso: string): string {\n const d = new Date(iso);\n return d.toLocaleDateString(undefined, {\n month: \"short\",\n day: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n}\n\nfunction fileIcon(type: string): string {\n if (type.startsWith(\"image/\")) return \"🖼️\";\n if (type.startsWith(\"video/\")) return \"🎬\";\n if (type.startsWith(\"audio/\")) return \"🎵\";\n if (type.includes(\"pdf\")) return \"📄\";\n if (type.includes(\"zip\") || type.includes(\"compressed\")) return \"🗜️\";\n if (type.startsWith(\"text/\")) return \"📝\";\n if (type.includes(\"json\") || type.includes(\"javascript\") || type.includes(\"typescript\")) return \"📜\";\n return \"📦\";\n}\n\nexport function FileList({ files, onDeleted }: FileListProps) {\n const [deleting, setDeleting] = useState(null);\n\n const handleDelete = useCallback(\n async (id: string, name: string) => {\n if (!confirm(`Delete \"${name}\"? This cannot be undone.`)) return;\n setDeleting(id);\n try {\n const res = await fetch(`/api/files/${id}`, { method: \"DELETE\" });\n if (!res.ok) throw new Error(\"Delete failed\");\n onDeleted();\n } catch (err) {\n alert(\"Failed to delete file\");\n } finally {\n setDeleting(null);\n }\n },\n [onDeleted],\n );\n\n if (files.length === 0) {\n return (\n

📂

No files yet — upload something above

\n );\n }\n\n return (\n

\n {files.map((file) => (\n \n {fileIcon(file.type)}\n\n

{file.name}

\n {formatSize(file.size)} · {formatDate(file.uploaded_at)}\n

\n\n \n ⬇ Download\n \n\n handleDelete(file.id, file.name)}\n disabled={deleting === file.id}\n class=\"text-sm px-3 py-1.5 bg-red-50 text-red-600 rounded-lg hover:bg-red-100 transition-colors font-medium disabled:opacity-50\"\n >\n {deleting === file.id ? \"…\" : \"🗑\"}\n \n

\n ))}\n \n );\n}\n",[],[135,197,199],"25157cbf-3185-43d0-972d-d367c4c37eb6","App.tsx","019f9064-4c01-75ff-86ac-5d41e3b74f3a",9,["D",1784833973528],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useCallback, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { UploadZone } from \"./UploadZone.tsx\";\nimport { FileList, type FileMeta } from \"./FileList.tsx\";\n\nexport function App() {\n const [files, setFiles] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n const refreshFiles = useCallback(async () => {\n try {\n const res = await fetch(\"/api/files\");\n const data = await res.json();\n setFiles(data.files || []);\n setError(null);\n } catch (err) {\n setError(\"Failed to load files\");\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n refreshFiles();\n }, [refreshFiles]);\n\n const handleUploaded = useCallback(() => {\n refreshFiles();\n }, [refreshFiles]);\n\n const handleDeleted = useCallback(() => {\n refreshFiles();\n }, [refreshFiles]);\n\n return (\n

\n 📁\n

Val Drive

Upload, store & download files

\n \n view source\n \n

\n\n \n\n {error && (\n

\n {error}\n

\n )}\n\n

\n Files ({files.length})\n

\n {loading ? (\n

Loading…

\n ) : (\n \n )}\n

\n );\n}\n",[],[135,197,206],"78809250-59c1-4932-88c7-36f9344ccffc",["D",1784833920008],[153,154,155],[135,197],["D",1784833920008],[152,156,157,158],[135],["D",1784833883007],["D",1789560070146],{"_11":12,"_91":-5},{"_11":12,"_85":86,"_87":-5,"_45":-5,"_88":89,"_90":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_80":-5,"_81":-5,"_82":-5,"_83":14,"_84":12},"ctx",{"_73":-5,"_112":258,"_259":260,"_261":262,"_263":38,"_264":38,"_265":38,"_266":50,"_267":-5,"_268":-7,"_269":-7,"_270":54,"_271":38,"_272":38,"_273":-5,"_274":38,"_275":38,"_276":38,"_277":-5},"ENV",{"_229":230,"_231":232,"_233":26,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1