\n \n

\n );\n}",[],[224,230,237],{"_103":245,"_95":246,"_157":247,"_159":231,"_160":142,"_161":248,"_163":118,"_105":249,"_100":250,"_165":207,"_167":251,"_168":22,"_169":-5,"_170":252,"_98":253},"98bae718-5ab0-11f0-a31e-f69ea79377d9","FileDumper.tsx","a08e2784-195b-11f0-81dc-569c3dd06744",261,["D",1751837497143],47,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport ReactHover, {\n Hover,\n Trigger,\n} from \"https://esm.sh/react-hover@3.0.1?deps=react@18.2.0,react-dom@18.2.0\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport copy from \"https://esm.sh/copy-to-clipboard@3.3.3\";\nimport { ContentState } from \"../../shared/utils.ts\";\nimport { client } from \"../client.ts\";\n\nexport function FileDumper() {\n const [content, setContent] = useState({ type: \"text\", value: \"\" });\n const [uploadedUrl, setUploadedUrl] = useState(\"\");\n const [toastMessage, setToastMessage] = useState(\"\");\n const pasteAreaRef = useRef(null);\n const urlInputRef = useRef(null);\n const fileInputRef = useRef(null);\n\n // Hover options for CLI example\n const hoverOptions = {\n followCursor: false,\n shiftX: 0,\n shiftY: 10,\n };\n\n useEffect(() => {\n pasteAreaRef.current?.focus();\n }, []);\n\n useEffect(() => {\n if (toastMessage) {\n const timer = setTimeout(() => setToastMessage(\"\"), 2000);\n return () => clearTimeout(timer);\n }\n }, [toastMessage]);\n\n const copyUrlToClipboard = async (url: string) => {\n try {\n const success = copy(url, {\n format: \"text/plain\", // Use plain text format\n onCopy: () => {\n setToastMessage(\"Link automatically copied!\");\n },\n });\n\n if (!success) {\n setToastMessage(\"Failed to copy link automatically\");\n }\n } catch {\n setToastMessage(\"Failed to copy link automatically\");\n }\n };\n\n const handleTextUpload = async (text: string) => {\n try {\n const resp = await client.blob.$post({\n form: {\n content: text,\n type: \"text\"\n }\n });\n\n if (resp.ok) {\n const { url } = await resp.json();\n setUploadedUrl(url);\n setContent({ type: \"text\", value: text });\n\n // Automatically copy the URL after upload\n await copyUrlToClipboard(url);\n }\n } catch {\n setToastMessage(\"Upload failed\");\n }\n };\n\n const handleFileUpload = async (file: File) => {\n try {\n const resp = await client.blob.$post({\n form: {\n file: file,\n filename: file.name,\n type: \"file\"\n }\n });\n \n if (!resp.ok) throw new Error(`Upload failed: ${resp.status}`);\n\n const { url } = await resp.json();\n setUploadedUrl(url);\n\n // Create a local preview for the file\n if (file.type.startsWith(\"image/\")) {\n const reader = new FileReader();\n reader.onloadend = () => {\n setContent({ type: \"image\", value: reader.result as string });\n };\n reader.readAsDataURL(file);\n }\n\n // Automatically copy the URL after upload\n await copyUrlToClipboard(url);\n } catch {\n setToastMessage(\"Upload failed\");\n }\n };\n\n const handlePaste = (event: React.ClipboardEvent) => {\n event.preventDefault();\n\n // Check for image first\n const file = event.clipboardData?.items[0]?.getAsFile();\n if (file) {\n handleFileUpload(file);\n return;\n }\n\n // If no file, check for text\n const pastedText = event.clipboardData?.getData(\"text/plain\");\n if (pastedText) {\n handleTextUpload(pastedText);\n }\n };\n\n const handleFileInput = async (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) handleFileUpload(file);\n };\n\n const handleUrlClick = () => {\n if (urlInputRef.current) {\n urlInputRef.current.select();\n const success = copy(uploadedUrl, {\n format: \"text/plain\",\n onCopy: () => {\n setToastMessage(\"Link copied!\");\n },\n });\n\n if (!success) {\n setToastMessage(\"Copy failed\");\n }\n }\n };\n\n const openFileChooser = () => {\n fileInputRef.current?.click();\n };\n\n const renderContent = () => {\n if (content.type === \"image\") {\n return (\n $\"Pasted\"$ \n );\n }\n if (content.type === \"text\") {\n return (\n \n {content.value || \"Paste or drag a file here\"}\n \n );\n }\n return \"Paste or drag a file here\";\n };\n\n return (\n \n

File Dump Thing

\n\n \n {renderContent()}\n \n\n \n\n \n Click, paste, or drag files here\n \n\n {uploadedUrl && (\n

Shareable Link:

\n \n

\n )}\n\n {toastMessage && (\n \n {toastMessage}\n \n )}\n\n \n - or,\n \n \n \n use the cli!\n \n \n \n \n {`❯ deno install -grAf -n=fdt https://esm.town/v/wolf/FileDumpThing/cli/upload.ts\n❯ echo \"foobarbuzz\" | fdt\nhttps://filedumpthing.val.run/blob?key=blob_text_1745171403155.txt`}\n \n \n \n \n \n );\n}",[],[224,230,246],[224,230],{"_103":256,"_95":257,"_157":258,"_159":225,"_160":142,"_161":259,"_163":118,"_105":260,"_100":261,"_165":207,"_167":262,"_168":22,"_169":-5,"_170":263,"_98":264},"7fdb0868-5a10-11f0-a253-f69ea79377d9","client.ts","259bfc2a-5a0d-11f0-8683-f69ea79377d9",219,["D",1751768735941],8,"import { hc } from \"https://esm.sh/hono@4.7.11/client\";\nimport type { AppType } from \"../backend/index.ts\";\nimport { DEPLOY_URL } from \"../shared/consts.ts\";\n\nexport const client = hc(DEPLOY_URL);",[],[224,257],{"_103":266,"_95":267,"_157":268,"_159":225,"_160":142,"_161":269,"_163":118,"_105":270,"_100":32,"_165":196,"_167":271,"_168":22,"_169":-5,"_170":272,"_98":273},"ade60000-5ab0-11f0-851f-f69ea79377d9","favicon.svg","ade60096-5ab0-11f0-851f-f69ea79377d9",263,["D",1751837532668],"",[],[224,267],{"_103":275,"_95":276,"_157":277,"_159":225,"_160":142,"_161":278,"_163":118,"_105":279,"_100":162,"_165":196,"_167":280,"_168":22,"_169":-5,"_170":281,"_98":282},"a913a2c6-5ab0-11f0-84fb-f69ea79377d9","index.html","41b5152e-195b-11f0-bc25-569c3dd06744",262,["D",1751837524575],"\n\n \n \n \n File Dump Thing\n \n \n \n

\n \n \n \n",[],[224,276],{"_103":284,"_95":285,"_157":286,"_159":225,"_160":142,"_161":287,"_163":118,"_105":288,"_100":32,"_165":207,"_167":289,"_168":22,"_169":-5,"_170":290,"_98":291},"41b130c6-195b-11f0-9e37-569c3dd06744","index.tsx","41b1315c-195b-11f0-9e37-569c3dd06744",6,["D",1744654018294],"/** @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();",[],[224,285],[224],{"_103":294,"_95":295,"_157":296,"_159":-5,"_160":142,"_161":297,"_163":118,"_105":298,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":299,"_98":327},"92e6548a-195b-11f0-9f5e-569c3dd06744","shared","fbeb05bc-1b76-4402-9a72-938a3f2056cc",13,["D",1744654154569],[300,310,319],{"_103":301,"_95":302,"_157":303,"_159":296,"_160":142,"_161":304,"_163":118,"_105":305,"_100":306,"_165":207,"_167":307,"_168":22,"_169":-5,"_170":308,"_98":309},"61a70c46-5a0d-11f0-a62f-f69ea79377d9","consts.ts","65a49600-23e0-11f0-8325-569c3dd06744",206,["D",1751767396777],7,"export const BLOB_PREFIX = \"filedumpthing/\";\nexport const DEPLOY_URL = \"https://filedumpthing.val.run\";",[],[295,302],{"_103":311,"_95":312,"_157":313,"_159":296,"_160":142,"_161":314,"_163":118,"_105":315,"_100":217,"_165":207,"_167":316,"_168":22,"_169":-5,"_170":317,"_98":318},"691c6456-5a0a-11f0-a227-f69ea79377d9","mimetype.ts","37dae5ae-1bb5-11f0-ad3a-569c3dd06744",165,["D",1751766120800],"export const mimeTypes: Record = {\n // Image formats\n \"jpg\": \"image/jpeg\",\n \"jpeg\": \"image/jpeg\",\n \"png\": \"image/png\",\n \"gif\": \"image/gif\",\n \"webp\": \"image/webp\",\n \"svg\": \"image/svg+xml\",\n \"bmp\": \"image/bmp\",\n \"ico\": \"image/x-icon\",\n // Text formats\n \"txt\": \"text/plain\",\n // Video formats\n \"mp4\": \"video/mp4\",\n \"webm\": \"video/webm\",\n \"mov\": \"video/quicktime\",\n \"avi\": \"video/x-msvideo\",\n \"mkv\": \"video/x-matroska\",\n \"m4v\": \"video/mp4\",\n};\n\nexport function getMimeType(fileName: string): string {\n const fileExtension = fileName.split(\".\").pop()?.toLowerCase() || \"\";\n return mimeTypes[fileExtension] || \"application/octet-stream\";\n}\n\nexport function getContentTypeHeaders(key: string): Record {\n const fileExtension = key.split(\".\").pop()?.toLowerCase() || \"\";\n const mimeType = getMimeType(key);\n\n const headers: Record = {\n \"Content-Type\": mimeType,\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n \"X-Content-Type-Options\": \"nosniff\",\n };\n\n // For video files, explicitly set the correct MIME type\n if (fileExtension === \"mp4\" || fileExtension === \"m4v\") {\n headers[\"Content-Type\"] = \"video/mp4\";\n } else if (fileExtension === \"webm\") {\n headers[\"Content-Type\"] = \"video/webm\";\n }\n\n return headers;\n}",[],[295,312],{"_103":320,"_95":213,"_157":321,"_159":296,"_160":142,"_161":322,"_163":118,"_105":323,"_100":306,"_165":207,"_167":324,"_168":22,"_169":-5,"_170":325,"_98":326},"19a65c8c-1e42-11f0-9120-569c3dd06744","92e64a08-195b-11f0-9f5e-569c3dd06744",136,["D",1745192969539],"// Types for file dumper\nexport interface UploadResponse {\n url: string;\n}\n\nexport interface ContentState {\n type: \"text\" | \"image\";\n value: string;\n}\n\n/**\n * Determine if content is likely text by checking for null bytes\n * Simple and reliable approach to detect binary files\n */\nexport function isTextContent(buffer: Uint8Array): boolean {\n // Convert buffer to string and check for null bytes\n const str = new TextDecoder().decode(buffer);\n return !str.includes(\"\\0\");\n}",[],[295,213],[295],{"_103":329,"_95":99,"_157":330,"_159":-5,"_160":142,"_161":331,"_163":118,"_105":332,"_100":32,"_165":196,"_167":333,"_168":22,"_169":-5,"_170":334,"_98":335},"62a195fa-195b-11f0-853b-569c3dd06744","62a196ea-195b-11f0-853b-569c3dd06744",11,["D",1744654073568],".git\n.DS_Store\nnode_modules\nvendor",[],[99],{"_103":337,"_95":192,"_157":338,"_159":-5,"_160":142,"_161":339,"_163":118,"_105":340,"_100":331,"_165":196,"_167":341,"_168":22,"_169":-5,"_170":342,"_98":343},"b40f29b4-1e17-11f0-bcac-569c3dd06744","41b95a6c-195b-11f0-a577-569c3dd06744",123,["D",1745174760234],"# File Dump Thing\n\nEasily share files and text snippets by pasting or uploading them.\nBuilt with React & Hono.\n\n- Paste text or images directly into the app\n- Upload files through the file input\n- Get shareable links instantly\n- Links are automatically copied to your clipboard\n- Preview images and text content\n- CLI tool for uploading files directly from your terminal\n- Smart content detection (automatically detects text vs binary)\n\n## How It Works\n\n1. The app uses Val Town's blob storage to store uploaded files and text\n2. When you paste or upload content, it's sent to the server and stored\n3. A unique URL is generated that can be shared with others\n4. The content can be accessed directly through the generated URL\n5. Smart detection determines if content is text or binary\n\n## CLI Installation & Usage\n\nThere's also a companion CLI tool!\n\nInstall the CLI tool globally:\n\n```bash\ndeno install -grAf -n=fdt https://esm.town/v/wolf/FileDumpThing/cli/upload.ts\n```\n\nThen use it to quickly upload files:\n\n```bash\n# Upload a file and get a shareable URL\ncat path/to/file.jpg | fdt file.jpg\n\n# Upload text from clipboard\npbpaste | fdt notes.txt\n```\n\nSee the [CLI README](/cli/README.md) for more details and examples.\n\n## Technical Details\n\n- **Frontend**: React components for the user interface\n - `components/FileDumper.tsx`: Main component for the file dumper interface\n - `components/App.tsx`: Root component that renders the FileDumper\n - `index.tsx`: Entry point for the React application\n - `index.html`: HTML template\n\n- **Backend**: Hono server for handling API requests\n - `index.ts`: API routes for file uploads and serving stored content\n - `api.ts`: API endpoints for file uploads\n\n- **Shared**: Code shared between frontend and backend\n - `utils.ts`: Shared types and utility functions\n - `mimetype.ts`: MIME type detection for various file formats\n\n- **CLI**: Command-line interface for file uploads\n - `upload.ts`: Deno script for uploading content via stdin\n\n\n- Uses Val Town's blob storage for file persistence\n- Built with TypeScript for type safety\n- React for the frontend UI\n- Hono for the backend API\n- Supports various file types with appropriate MIME type detection\n- Smart content detection (checks for null bytes and UTF-8 validity)\n- CLI tool for terminal-based uploads",[],[192],{"_103":345,"_95":346,"_157":347,"_159":-5,"_160":142,"_161":348,"_163":118,"_105":349,"_100":162,"_165":196,"_167":350,"_168":22,"_169":-5,"_170":351,"_98":352},"3eb3f020-5a10-11f0-be4a-f69ea79377d9","deno.json","629e3798-195b-11f0-9081-569c3dd06744",217,["D",1751768626629],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"tasks\": {\n \"check\": \"deno check .\"\n },\n \"compilerOptions\": {\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ],\n \"strictNullChecks\": true\n },\n \"lint\": {\n \"files\": {\n \"include\": [\"deno:/https/esm.town/**/*\"]\n },\n \"rules\": {\n \"exclude\": [\"no-explicit-any\", \"no-window\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n },\n \"importMap\": \"./import_map.json\"\n}",[],[346],{"_103":354,"_95":355,"_157":356,"_159":-5,"_160":142,"_161":357,"_163":118,"_105":358,"_100":287,"_165":207,"_167":359,"_168":22,"_169":-5,"_170":360,"_98":361},"302635da-5ab1-11f0-b9f6-f69ea79377d9","test_rpc.ts","dcce043a-5ab0-11f0-9588-f69ea79377d9",271,["D",1751837751189],"import { hc } from \"https://esm.sh/hono@4.7.11/client\";\nimport type { AppType } from \"./backend/index.ts\";\n\nconst client = hc(\"https://filedumpthing.val.run\");\n\n// Test text upload\ntry {\n console.log(\"Testing text upload...\");\n const resp = await client.blob.$post({\n form: {\n content: \"Hello World from RPC test!\",\n type: \"text\",\n },\n });\n\n console.log(\"Response status:\", resp.status);\n\n if (resp.ok) {\n const data = await resp.json();\n console.log(\"Success! URL:\", data.url);\n\n // Test retrieving the uploaded content\n const getResp = await fetch(data.url);\n if (getResp.ok) {\n const content = await getResp.text();\n console.log(\"Retrieved content:\", content);\n }\n } else {\n console.log(\"Error:\", await resp.text());\n }\n} catch (error) {\n console.error(\"Error:\", error);\n}",[],[355],"files",[154,172,183,190,200,211,222,228,235,244,255,265,274,283,293,300,310,319,328,336,344,353],"counts",{"_366":32,"_367":217,"_368":369,"_370":32},"pulls","branches","forks",5,"envVars","contents",[],{"_103":329,"_95":99,"_157":330,"_159":-5,"_160":142,"_161":331,"_163":118,"_105":374,"_100":32,"_165":196,"_167":333,"_168":22,"_169":-5,"_98":375},["D",1744654073568],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":384,"_152":389,"_362":456,"_196":457,"_371":459,"_460":-5,"_461":22,"_462":-5,"_463":-5,"_464":-5,"_465":466},{"_103":104,"_95":96,"_105":385,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":120,"_121":122,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":386,"_136":387,"_139":388,"_151":22},["D",1744654017891],{"_93":94,"_134":135},{"_93":94,"_138":135},{"_100":141,"_95":43,"_103":142,"_143":104,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":96,"_150":94},[390,396,408,432,444,447,450,453],{"_103":155,"_95":156,"_157":158,"_159":-5,"_160":142,"_161":162,"_163":118,"_105":164,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":391,"_98":395},[392],{"_103":173,"_95":174,"_157":116,"_159":158,"_160":142,"_161":141,"_163":118,"_105":175,"_100":176,"_165":177,"_167":178,"_168":22,"_169":179,"_170":393,"_98":394},[],[156,174],[156],{"_103":184,"_95":185,"_157":186,"_159":-5,"_160":142,"_161":187,"_163":118,"_105":188,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":397,"_98":407},[398,401,404],{"_103":191,"_95":192,"_157":193,"_159":186,"_160":142,"_161":194,"_163":118,"_105":195,"_100":32,"_165":196,"_167":197,"_168":22,"_169":-5,"_170":399,"_98":400},[],[185,192],{"_103":201,"_95":202,"_157":203,"_159":186,"_160":142,"_161":204,"_163":118,"_105":205,"_100":206,"_165":207,"_167":208,"_168":22,"_169":-5,"_170":402,"_98":403},[],[185,202],{"_103":212,"_95":213,"_157":214,"_159":186,"_160":142,"_161":215,"_163":118,"_105":216,"_100":217,"_165":207,"_167":218,"_168":22,"_169":-5,"_170":405,"_98":406},[],[185,213],[185],{"_103":223,"_95":224,"_157":225,"_159":-5,"_160":142,"_161":217,"_163":118,"_105":226,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":409,"_98":431},[410,419,422,425,428],{"_103":229,"_95":230,"_157":231,"_159":225,"_160":142,"_161":232,"_163":118,"_105":233,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":411,"_98":418},[412,415],{"_103":236,"_95":237,"_157":238,"_159":231,"_160":142,"_161":239,"_163":118,"_105":240,"_100":162,"_165":207,"_167":241,"_168":22,"_169":-5,"_170":413,"_98":414},[],[224,230,237],{"_103":245,"_95":246,"_157":247,"_159":231,"_160":142,"_161":248,"_163":118,"_105":249,"_100":250,"_165":207,"_167":251,"_168":22,"_169":-5,"_170":416,"_98":417},[],[224,230,246],[224,230],{"_103":256,"_95":257,"_157":258,"_159":225,"_160":142,"_161":259,"_163":118,"_105":260,"_100":261,"_165":207,"_167":262,"_168":22,"_169":-5,"_170":420,"_98":421},[],[224,257],{"_103":266,"_95":267,"_157":268,"_159":225,"_160":142,"_161":269,"_163":118,"_105":270,"_100":32,"_165":196,"_167":271,"_168":22,"_169":-5,"_170":423,"_98":424},[],[224,267],{"_103":275,"_95":276,"_157":277,"_159":225,"_160":142,"_161":278,"_163":118,"_105":279,"_100":162,"_165":196,"_167":280,"_168":22,"_169":-5,"_170":426,"_98":427},[],[224,276],{"_103":284,"_95":285,"_157":286,"_159":225,"_160":142,"_161":287,"_163":118,"_105":288,"_100":32,"_165":207,"_167":289,"_168":22,"_169":-5,"_170":429,"_98":430},[],[224,285],[224],{"_103":294,"_95":295,"_157":296,"_159":-5,"_160":142,"_161":297,"_163":118,"_105":298,"_100":32,"_165":166,"_167":-5,"_168":22,"_169":-5,"_170":433,"_98":443},[434,437,440],{"_103":301,"_95":302,"_157":303,"_159":296,"_160":142,"_161":304,"_163":118,"_105":305,"_100":306,"_165":207,"_167":307,"_168":22,"_169":-5,"_170":435,"_98":436},[],[295,302],{"_103":311,"_95":312,"_157":313,"_159":296,"_160":142,"_161":314,"_163":118,"_105":315,"_100":217,"_165":207,"_167":316,"_168":22,"_169":-5,"_170":438,"_98":439},[],[295,312],{"_103":320,"_95":213,"_157":321,"_159":296,"_160":142,"_161":322,"_163":118,"_105":323,"_100":306,"_165":207,"_167":324,"_168":22,"_169":-5,"_170":441,"_98":442},[],[295,213],[295],{"_103":329,"_95":99,"_157":330,"_159":-5,"_160":142,"_161":331,"_163":118,"_105":332,"_100":32,"_165":196,"_167":333,"_168":22,"_169":-5,"_170":445,"_98":446},[],[99],{"_103":337,"_95":192,"_157":338,"_159":-5,"_160":142,"_161":339,"_163":118,"_105":340,"_100":331,"_165":196,"_167":341,"_168":22,"_169":-5,"_170":448,"_98":449},[],[192],{"_103":345,"_95":346,"_157":347,"_159":-5,"_160":142,"_161":348,"_163":118,"_105":349,"_100":162,"_165":196,"_167":350,"_168":22,"_169":-5,"_170":451,"_98":452},[],[346],{"_103":354,"_95":355,"_157":356,"_159":-5,"_160":142,"_161":357,"_163":118,"_105":358,"_100":287,"_165":207,"_167":359,"_168":22,"_169":-5,"_170":454,"_98":455},[],[355],[390,392,396,398,401,404,408,410,412,415,419,422,425,428,432,434,437,440,444,447,450,453],{"_103":329,"_95":99,"_157":330,"_159":-5,"_160":142,"_161":331,"_163":118,"_105":374,"_100":32,"_165":196,"_167":333,"_168":22,"_169":-5,"_98":458},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]