[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_255":256,"_257":258},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_192":-5,"_20":193,"_22":194,"_195":196,"_197":198,"_25":199,"_24":-5,"_200":-5,"_201":-5,"_202":54,"_203":204,"_205":45,"_206":-5,"_207":-5,"_208":209},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","ellipticconchnotellip120121","name","abcd_123816_dfsiuifa_1241","branchName","main","version","path","","project",{"_34":136,"_13":14,"_46":137,"_138":-5,"_139":54,"_140":141,"_142":141,"_143":19,"_144":-5,"_145":146,"_147":38,"_148":45,"_149":-5,"_150":-5,"_151":62,"_152":153,"_154":155,"_156":157,"_158":159,"_160":-5,"_161":162,"_163":162,"_164":165,"_166":165,"_167":165,"_168":162,"_169":162,"_170":171,"_172":173,"_174":175,"_176":54},"tree",[65,66],"file","contents",[32,33],"upstream","pull","ahead","behind","envVars",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":63,"_51":-5,"_53":54,"_55":-5,"_18":64},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"id","2514479e-248e-4c0b-8e8a-bb83d85533ff","main.ts","fileId","4b50eab2-86ca-11f1-89a7-1607ee4eb77e","parentId","branchId","191a319e-76d4-40e2-a6f6-3f5f23db7bce","branchVersion",5,"latest",true,"createdAt",["D",1784833948288],3,"fileType","http","content","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst app = new Hono();\n\n// --- Database setup ---\n// Stores file metadata so we can list files without scanning all blobs\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS files (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n blob_key TEXT NOT NULL,\n size INTEGER NOT NULL,\n type TEXT NOT NULL,\n uploaded_at TEXT NOT NULL\n)`);\n\n// --- Static file serving ---\napp.get(\"/\", (c) => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- API: List files ---\napp.get(\"/api/files\", async (c) => {\n const result = await sqlite.execute(\n \"SELECT id, name, size, type, uploaded_at FROM files ORDER BY uploaded_at DESC\",\n );\n return c.json({ files: result.rows });\n});\n\n// --- API: Upload file ---\napp.post(\"/api/upload\", async (c) => {\n const formData = await c.req.formData();\n const file = formData.get(\"file\") as File | null;\n if (!file) {\n return c.json({ error: \"No file provided\" }, 400);\n }\n\n const id = crypto.randomUUID();\n const blobKey = `drive/${id}`;\n\n // Store file content in blob\n const arrayBuffer = await file.arrayBuffer();\n await blob.set(blobKey, arrayBuffer);\n\n // Store metadata in SQLite\n await sqlite.execute({\n sql: \"INSERT INTO files (id, name, blob_key, size, type, uploaded_at) VALUES (?, ?, ?, ?, ?, ?)\",\n args: [\n id,\n file.name,\n blobKey,\n file.size,\n file.type || \"application/octet-stream\",\n new Date().toISOString(),\n ],\n });\n\n return c.json({\n id,\n name: file.name,\n size: file.size,\n type: file.type || \"application/octet-stream\",\n uploaded_at: new Date().toISOString(),\n });\n});\n\n// --- API: Download file ---\napp.get(\"/api/download/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const result = await sqlite.execute({\n sql: \"SELECT name, blob_key, type FROM files WHERE id = ?\",\n args: [id],\n });\n\n if (result.rows.length === 0) {\n return c.json({ error: \"File not found\" }, 404);\n }\n\n const row = result.rows[0] as { name: string; blob_key: string; type: string };\n\n let res: Response;\n try {\n res = await blob.get(row.blob_key);\n } catch {\n return c.json({ error: \"File data not found\" }, 404);\n }\n\n const headers = new Headers(res.headers);\n headers.set(\n \"Content-Disposition\",\n `attachment; filename=\"${encodeURIComponent(row.name)}\"`,\n );\n headers.set(\"Content-Type\", row.type);\n\n return new Response(res.body, { status: 200, headers });\n});\n\n// --- API: Delete file ---\napp.delete(\"/api/files/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const result = await sqlite.execute({\n sql: \"SELECT blob_key FROM files WHERE id = ?\",\n args: [id],\n });\n\n if (result.rows.length === 0) {\n return c.json({ error: \"File not found\" }, 404);\n }\n\n const row = result.rows[0] as { blob_key: string };\n\n // Delete blob and metadata\n await blob.delete(row.blob_key);\n await sqlite.execute({ sql: \"DELETE FROM files WHERE id = ?\", args: [id] });\n\n return c.json({ success: true });\n});\n\n// Unwrap and rethrow Hono errors\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","deleted",false,"label",[36],"5239677c-8957-4b5c-abf0-a344957ed9b0","frontend","019f9064-4c01-75ff-86ac-550902767e42",4,["D",1784833920008],0,"directory",[58],{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":63,"_51":-5,"_53":54,"_55":-5,"_68":72,"_18":73},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":69,"_18":70},["D",1784833948288],"children",[],[36],["D",1784833920008],[74,75,76,77],[58],{"_34":103,"_13":104,"_37":105,"_39":59,"_40":41,"_42":60,"_44":45,"_46":106,"_17":62,"_49":63,"_51":-5,"_53":54,"_55":-5,"_68":107,"_18":108},{"_34":96,"_13":97,"_37":98,"_39":59,"_40":41,"_42":60,"_44":45,"_46":99,"_17":62,"_49":24,"_51":100,"_53":54,"_55":-5,"_68":101,"_18":102},{"_34":88,"_13":89,"_37":90,"_39":59,"_40":41,"_42":91,"_44":45,"_46":92,"_17":83,"_49":24,"_51":93,"_53":54,"_55":-5,"_68":94,"_18":95},{"_34":78,"_13":79,"_37":80,"_39":59,"_40":41,"_42":81,"_44":45,"_46":82,"_17":83,"_49":84,"_51":85,"_53":54,"_55":-5,"_68":86,"_18":87},"e4312aca-9e16-4b32-b8c1-97660271bd8d","index.tsx","019f9064-4c02-764f-ace7-10d853990ff6",8,["D",1784833965490],1,"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",[],[58,79],"3e4a5c64-1275-44fb-80f4-4cafa46bd41f","index.html","019f9064-4c02-764f-ace7-0cd78d94e28c",6,["D",1784833958574],"\n\n \n \n \n 📁 Val Drive — File Storage\n \n \n \n \n

\n \n \n \n\n",[],[58,89],"7c0c2148-2fe8-49b5-898f-7dad50cc6d56","favicon.svg","019f9064-4c02-764f-ace7-097ca6b7c3f6",["D",1784833920008],"\n",[],[58,97],"78809250-59c1-4932-88c7-36f9344ccffc","components","019f9064-4c01-75ff-86ac-58518f2af3ee",["D",1784833920008],[109,110,111],[58,104],{"_34":128,"_13":129,"_37":130,"_39":105,"_40":41,"_42":131,"_44":45,"_46":132,"_17":83,"_49":84,"_51":133,"_53":54,"_55":-5,"_68":134,"_18":135},{"_34":120,"_13":121,"_37":122,"_39":105,"_40":41,"_42":123,"_44":45,"_46":124,"_17":62,"_49":84,"_51":125,"_53":54,"_55":-5,"_68":126,"_18":127},{"_34":112,"_13":113,"_37":114,"_39":105,"_40":41,"_42":115,"_44":45,"_46":116,"_17":62,"_49":84,"_51":117,"_53":54,"_55":-5,"_68":118,"_18":119},"25c25727-eeab-4c78-89fc-9e9dc2223f63","UploadZone.tsx","914d0262-86ca-11f1-babb-1607ee4eb77e",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",[],[58,104,113],"fb49eafe-d892-429f-8877-5ae9f016da5d","FileList.tsx","9154c434-86ca-11f1-b368-1607ee4eb77e",11,["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",[],[58,104,121],"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",[],[58,104,129],"a60ddef1-f52f-4245-bfc1-6bc50c43d08c",["D",1784833883007],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","10f09609-34fe-4cb3-b858-f51b33ab5ab0","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019f9061-08be-741b-8f43-2a43f7d9fb4d","tursoName","a60ddef1f52f4245bfc16bc50c43d08c","tursoHostname","a60ddef1f52f4245bfc16bc50c43d08c-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789560070146],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_191":-5},"org",{"_11":12,"_185":186,"_187":-5,"_145":-5,"_188":189,"_190":54},"branch",{"_17":123,"_13":16,"_34":41,"_177":136,"_178":-5,"_179":-5,"_180":-5,"_181":-5,"_182":-5,"_183":14,"_184":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","EllipticConch","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_34":136,"_13":14,"_46":250,"_138":-5,"_139":54,"_140":141,"_142":141,"_143":19,"_144":-5,"_145":146,"_147":38,"_148":45,"_149":-5,"_150":-5,"_151":62,"_152":153,"_154":155,"_156":157,"_158":251,"_160":-5,"_161":162,"_163":162,"_164":165,"_166":165,"_167":165,"_168":162,"_169":162,"_170":252,"_172":253,"_174":254,"_176":54},[223,231],"files",[223,224,225,226,227,228,229,230,231],"counts",{"_214":62,"_215":83,"_216":62,"_31":217,"_218":219},[210,211],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":61,"_17":62,"_49":63,"_51":-5,"_53":54,"_55":-5,"_18":213},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":212},[36],[58],"pulls","branches","forks",{"_220":62,"_222":62},"connections",{"_220":62,"_221":62},"count","unfilledCount","emptyCount",{"_34":57,"_13":58,"_37":59,"_39":-5,"_40":41,"_42":60,"_44":45,"_46":71,"_17":62,"_49":63,"_51":-5,"_53":54,"_55":-5,"_68":248,"_18":249},{"_34":103,"_13":104,"_37":105,"_39":59,"_40":41,"_42":60,"_44":45,"_46":106,"_17":62,"_49":63,"_51":-5,"_53":54,"_55":-5,"_68":246,"_18":247},{"_34":128,"_13":129,"_37":130,"_39":105,"_40":41,"_42":131,"_44":45,"_46":132,"_17":83,"_49":84,"_51":133,"_53":54,"_55":-5,"_68":244,"_18":245},{"_34":120,"_13":121,"_37":122,"_39":105,"_40":41,"_42":123,"_44":45,"_46":124,"_17":62,"_49":84,"_51":125,"_53":54,"_55":-5,"_68":242,"_18":243},{"_34":112,"_13":113,"_37":114,"_39":105,"_40":41,"_42":115,"_44":45,"_46":116,"_17":62,"_49":84,"_51":117,"_53":54,"_55":-5,"_68":240,"_18":241},{"_34":96,"_13":97,"_37":98,"_39":59,"_40":41,"_42":60,"_44":45,"_46":99,"_17":62,"_49":24,"_51":100,"_53":54,"_55":-5,"_68":238,"_18":239},{"_34":88,"_13":89,"_37":90,"_39":59,"_40":41,"_42":91,"_44":45,"_46":92,"_17":83,"_49":24,"_51":93,"_53":54,"_55":-5,"_68":236,"_18":237},{"_34":78,"_13":79,"_37":80,"_39":59,"_40":41,"_42":81,"_44":45,"_46":82,"_17":83,"_49":84,"_51":85,"_53":54,"_55":-5,"_68":234,"_18":235},{"_34":35,"_13":36,"_37":38,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":67,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_68":232,"_18":233},[],[36],[],[58,79],[],[58,89],[],[58,97],[],[58,104,113],[],[58,104,121],[],[58,104,129],[225,226,227],[58,104],[224,228,229,230],[58],["D",1784833883007],["D",1789560070146],{"_11":12,"_191":-5},{"_11":12,"_185":186,"_187":-5,"_145":-5,"_188":189,"_190":54},{"_17":123,"_13":16,"_34":41,"_177":136,"_178":-5,"_179":-5,"_180":-5,"_181":-5,"_182":-5,"_183":14,"_184":12},"ctx",{"_170":-5,"_207":288,"_289":290,"_291":292,"_293":54,"_294":54,"_295":54,"_296":45,"_297":-5,"_298":-7,"_299":-7,"_300":62,"_301":54,"_302":54,"_303":-5,"_304":54,"_305":54,"_306":54,"_307":-5},"ENV",{"_259":260,"_261":262,"_263":16,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Code