\n \n

\n );\n}",[],[223,229,235],{"_102":242,"_95":243,"_155":244,"_157":230,"_158":136,"_159":135,"_160":161,"_104":245,"_99":32,"_163":175,"_165":246,"_166":22,"_167":-5,"_168":247,"_98":248},"87911d8e-43a1-11f0-b992-76b3cceeab13","FileDumper.tsx","76d9cd4d-7327-4659-9f07-36202483c3ab",["D",1749302149105],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport ReactHover, { Hover, Trigger } 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\";\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 const formData = new FormData();\n formData.append(\"content\", text);\n formData.append(\"type\", \"text\");\n\n try {\n const response = await fetch(\"/api/upload\", {\n method: \"POST\",\n body: formData,\n });\n\n if (response.ok) {\n const { url } = await response.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 const formData = new FormData();\n formData.append(\"file\", file);\n formData.append(\"filename\", file.name);\n formData.append(\"type\", \"file\");\n\n try {\n const response = await fetch(\"/api/upload\", {\n method: \"POST\",\n body: formData,\n });\n\n if (response.ok) {\n const { url } = await response.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 }\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 $\"Pasted\"$ ;\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}",[],[223,229,243],[223,229],{"_102":251,"_95":252,"_155":253,"_157":224,"_158":136,"_159":135,"_160":161,"_104":254,"_99":32,"_163":200,"_165":255,"_166":22,"_167":-5,"_168":256,"_98":257},"87912a0e-43a1-11f0-b992-76b3cceeab13","index.html","0eef62f7-3078-44c0-8e05-5bb8f3d42912",["D",1749302149105],"\n\n \n \n \n File Dump Thing\n \n \n \n \n

\n \n \n \n",[],[223,252],{"_102":259,"_95":260,"_155":261,"_157":224,"_158":136,"_159":135,"_160":161,"_104":262,"_99":32,"_163":175,"_165":263,"_166":22,"_167":-5,"_168":264,"_98":265},"87912b62-43a1-11f0-b992-76b3cceeab13","index.tsx","270085e3-27bc-4be8-89ce-6ad30dadd3c7",["D",1749302149105],"/** @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();",[],[223,260],[223],{"_102":268,"_95":269,"_155":270,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":271,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_168":272,"_98":296},"87913490-43a1-11f0-b992-76b3cceeab13","shared","36a0f533-6dbf-455f-b3ac-574a7385728c",["D",1749302149105],[273,281,289],{"_102":274,"_95":275,"_155":276,"_157":270,"_158":136,"_159":135,"_160":161,"_104":277,"_99":32,"_163":175,"_165":278,"_166":22,"_167":-5,"_168":279,"_98":280},"87912e82-43a1-11f0-b992-76b3cceeab13","consts.ts","689ea428-7f50-4eaa-bef7-4c18d73ab4ce",["D",1749302149105],"export const BLOB_PREFIX = \"filedumpthing/\";",[],[269,275],{"_102":282,"_95":283,"_155":284,"_157":270,"_158":136,"_159":135,"_160":161,"_104":285,"_99":32,"_163":175,"_165":286,"_166":22,"_167":-5,"_168":287,"_98":288},"87912fd6-43a1-11f0-b992-76b3cceeab13","mimetype.ts","40f82993-3de7-404e-a124-1d6912b62945",["D",1749302149105],"// Mime type mapping for file extensions\nexport 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\n// Helper to get mime type from filename\nexport function getMimeType(fileName: string): string {\n const fileExtension = fileName.split('.').pop()?.toLowerCase() || '';\n return mimeTypes[fileExtension] || 'application/octet-stream';\n}\n\n// Get MIME type with special handling for video files\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}",[],[269,283],{"_102":290,"_95":214,"_155":291,"_157":270,"_158":136,"_159":135,"_160":161,"_104":292,"_99":32,"_163":175,"_165":293,"_166":22,"_167":-5,"_168":294,"_98":295},"87913184-43a1-11f0-b992-76b3cceeab13","43322381-1991-4c5f-9f04-44917c09d60a",["D",1749302149105],"// 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}",[],[269,214],[269],{"_102":298,"_95":299,"_155":300,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":301,"_99":32,"_163":200,"_165":302,"_166":22,"_167":-5,"_168":303,"_98":304},"87913652-43a1-11f0-b992-76b3cceeab13",".vtignore","3bee29a5-2368-4be0-90aa-af386f51cb43",["D",1749302149105],".git\n.DS_Store\nnode_modules\nvendor",[],[299],{"_102":306,"_95":197,"_155":307,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":308,"_99":32,"_163":200,"_165":309,"_166":22,"_167":-5,"_168":310,"_98":311},"8791381e-43a1-11f0-b992-76b3cceeab13","e7adfd9e-1e67-4f99-b112-f92b4039a932",["D",1749302149105],"# 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",[],[197],{"_102":313,"_95":314,"_155":315,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":316,"_99":32,"_163":200,"_165":317,"_166":22,"_167":-5,"_168":318,"_98":319},"87913c38-43a1-11f0-b992-76b3cceeab13","deno.json","c425db28-24ac-4206-b691-7fc963d593fb",["D",1749302149105],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\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}",[],[314],"files",[152,170,179,189,195,204,212,221,227,233,241,250,258,267,273,281,289,297,305,312],"counts",{"_324":32,"_325":135,"_326":32,"_327":32},"pulls","branches","forks","envVars","contents",[330,333,336,339,342,345,348],{"_102":153,"_95":154,"_155":156,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":331,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":332},["D",1749302149105],[154],{"_102":190,"_95":191,"_155":192,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":334,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":335},["D",1749302149105],[191],{"_102":222,"_95":223,"_155":224,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":337,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":338},["D",1749302149105],[223],{"_102":268,"_95":269,"_155":270,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":340,"_99":32,"_163":164,"_165":-5,"_166":22,"_167":-5,"_98":341},["D",1749302149105],[269],{"_102":298,"_95":299,"_155":300,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":343,"_99":32,"_163":200,"_165":302,"_166":22,"_167":-5,"_98":344},["D",1749302149105],[299],{"_102":306,"_95":197,"_155":307,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":346,"_99":32,"_163":200,"_165":309,"_166":22,"_167":-5,"_98":347},["D",1749302149105],[197],{"_102":313,"_95":314,"_155":315,"_157":-5,"_158":136,"_159":135,"_160":161,"_104":349,"_99":32,"_163":200,"_165":317,"_166":22,"_167":-5,"_98":350},["D",1749302149105],[314],"upstreamProject",{"_102":144,"_95":96,"_110":353,"_111":-5,"_108":109,"_23":354},"Share files with a paste!",{"_93":355,"_128":356},"wolf","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJvVXpPVUZRTjZGTGd2Q2t4c0RRdFpNZWJ5UCJ9","upstreamBranch",{"_102":139,"_104":359,"_360":361,"_95":43,"_137":144,"_99":362,"_138":-5,"_140":-5,"_363":364,"_106":-5,"_149":22,"_108":109,"_148":355,"_16":146,"_147":96},["D",1744654017891],"updatedAt",["D",1751837775373],272,"lockfileKey","1752596094813-esm.town_v_wolf_FileDumpThing@272-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_93":94,"_95":96,"_97":43,"_100":371,"_376":32,"_377":378,"_379":380,"_386":22,"_387":375,"_388":389,"_392":-5},{"_102":103,"_95":96,"_104":372,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":-5,"_114":22,"_115":-5,"_116":32,"_16":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":373,"_130":374,"_133":375,"_149":22},["D",1749302149105],{"_93":94,"_128":129},{"_93":94,"_132":129},{"_99":135,"_95":43,"_102":136,"_137":103,"_138":139,"_140":141,"_142":109,"_143":144,"_145":146,"_147":96,"_148":94},"ahead","behind",109,"diff",{"_381":382,"_166":383,"_384":385},"added",[],[],"modified",[],"hasChanges","sourceBranch","targetBranch",{"_102":139,"_104":390,"_360":391,"_95":43,"_137":144,"_99":362,"_138":-5,"_140":-5,"_363":364,"_106":-5,"_149":22,"_108":109,"_148":355,"_16":146,"_147":96},["D",1744654017891],["D",1751837775373],"pull","actionData","errors"]

Mergesacredlindsay/mainintowolf/main