📄 Document Storage

\n );\n}\n\nconst styles = {\n container: {\n fontFamily: \"system-ui, sans-serif\",\n maxWidth: \"100%\",\n width: \"100%\",\n margin: \"0\",\n padding: \"20px\",\n boxSizing: \"border-box\",\n textAlign: \"center\",\n },\n uploadForm: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: \"10px\",\n marginBottom: \"20px\",\n width: \"100%\",\n },\n fileInput: {\n padding: \"10px\",\n border: \"1px solid #ccc\",\n borderRadius: \"4px\",\n width: \"100%\",\n maxWidth: \"300px\",\n touchAction: \"manipulation\",\n },\n uploadButton: {\n padding: \"12px 15px\",\n backgroundColor: \"#4CAF50\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n width: \"100%\",\n maxWidth: \"300px\",\n fontSize: \"16px\",\n touchAction: \"manipulation\",\n },\n documentList: {\n textAlign: \"left\",\n width: \"100%\",\n },\n list: {\n listStyleType: \"none\",\n padding: 0,\n margin: 0,\n },\n listItem: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n padding: \"15px 10px\",\n borderBottom: \"1px solid #eee\",\n touchAction: \"manipulation\",\n },\n documentInfo: {\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n marginRight: \"10px\",\n },\n documentName: {\n overflow: \"hidden\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n },\n documentTimestamp: {\n fontSize: \"0.8em\",\n color: \"#666\",\n marginTop: \"5px\",\n },\n deleteButton: {\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"20px\",\n padding: \"10px\",\n touchAction: \"manipulation\",\n },\n sourceLink: {\n display: \"block\",\n marginTop: \"20px\",\n color: \"#666\",\n textDecoration: \"none\",\n fontSize: \"14px\",\n },\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/list-documents\") {\n const documents = await blob.list(`${KEY}_`);\n const documentDetails = documents.map(doc => ({\n name: doc.key.replace(`${KEY}_`, \"\"),\n uploadedAt: doc.lastModified,\n })).sort((a, b) => new Date(b.uploadedAt) - new Date(a.uploadedAt));\n\n return new Response(JSON.stringify(documentDetails), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/upload-document\") {\n const formData = await request.formData();\n const file = formData.get(\"document\") as File;\n\n if (!file) {\n return new Response(\"No file uploaded\", { status: 400 });\n }\n\n const arrayBuffer = await file.arrayBuffer();\n await blob.set(`${KEY}_${file.name}`, new Uint8Array(arrayBuffer), {\n metadata: {\n uploadedAt: new Date().toISOString(),\n },\n });\n\n return new Response(\"Document uploaded successfully\", { status: 200 });\n }\n\n if (request.method === \"DELETE\" && new URL(request.url).pathname === \"/delete-document\") {\n const url = new URL(request.url);\n const filename = url.searchParams.get(\"filename\");\n\n if (!filename) {\n return new Response(\"No filename provided\", { status: 400 });\n }\n\n await blob.delete(`${KEY}_${filename}`);\n return new Response(\"Document deleted successfully\", { status: 200 });\n }\n\n return new Response(\n `\n \n \n Document Storage\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1739804524085],"version",6,"currentUserHasLiked","likeCount",1,"forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","Alphydoo","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydDlsU1dnaGxpc01MWklwekg2cGExTGJVTkkifQ","forkedVal","interval","slug","Alphydoo/Document_Storage_System","description","@jsxImportSource https://esm.sh/react@18.2.0","versions",[141,144,148,152,156,159,162],{"_117":118,"_142":-5,"_115":143,"_112":110},"prId",["D",1739804524085],{"_117":145,"_142":-5,"_115":146,"_112":147},5,["D",1739783134878],"58ebc82e-ed0e-11ef-b5ca-e6cdfca9ef9f",{"_117":149,"_142":-5,"_115":150,"_112":151},4,["D",1739783006272],"0c43bf04-ed0e-11ef-b514-e6cdfca9ef9f",{"_117":153,"_142":-5,"_115":154,"_112":155},3,["D",1739782632160],"2d47cb74-ed0d-11ef-ac36-e6cdfca9ef9f",{"_117":90,"_142":-5,"_115":157,"_112":158},["D",1739782529699],"f0345036-ed0c-11ef-888b-e6cdfca9ef9f",{"_117":121,"_142":-5,"_115":160,"_112":161},["D",1739782429256],"b455dcf6-ed0c-11ef-96df-e6cdfca9ef9f",{"_117":31,"_142":-5,"_115":163,"_112":164},["D",1739782146326],"0bb2d5d6-ed0c-11ef-bb2e-e6cdfca9ef9f","recentThread","breadcrumbs","comments",[169],{"_112":170,"_171":172,"_115":173,"_174":-5,"_175":26,"_176":26,"_20":177},"af89bd28-ed11-11ef-b74f-e6cdfca9ef9f","body","nice",["D",1739784568703],"updatedAt","canDelete","canEdit",{"_129":130,"_131":132},"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":181,"_182":183,"_94":184},"single","redirect","/v/Alphydoo/Document_Storage_System/versions",{"_112":151,"_113":185,"_117":149,"_115":186,"_187":99,"_100":101,"_107":108,"_129":130,"_11":96,"_188":-5,"_189":-5,"_190":-5,"_178":26,"_135":136},"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { createHash } from \"https://deno.land/std@0.193.0/crypto/mod.ts\";\n\n// Utility function to format relative time\nfunction formatRelativeTime(timestamp) {\n const now = new Date();\n const past = new Date(timestamp);\n const diffInSeconds = Math.floor((now - past) / 1000);\n\n if (diffInSeconds < 60) return \"just now\";\n if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`;\n if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`;\n if (diffInSeconds < 604800) return `${Math.floor(diffInSeconds / 86400)} days ago`;\n\n return past.toLocaleDateString();\n}\n\n// Utility function to hash passwords\nasync function hashPassword(password) {\n const encoder = new TextEncoder();\n const data = encoder.encode(password);\n const hashBuffer = await crypto.subtle.digest('SHA-256', data);\n return Array.from(new Uint8Array(hashBuffer))\n .map(b => b.toString(16).padStart(2, '0'))\n .join('');\n}\n\nfunction App() {\n const [documents, setDocuments] = useState([]);\n const [selectedFile, setSelectedFile] = useState(null);\n const [user, setUser] = useState(null);\n const [username, setUsername] = useState('');\n const [password, setPassword] = useState('');\n const [isLogin, setIsLogin] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n checkSession();\n }, []);\n\n const checkSession = async () => {\n try {\n const response = await fetch('/check-session');\n const userData = await response.json();\n if (userData.username) {\n setUser(userData);\n fetchDocuments();\n }\n } catch (error) {\n console.error('Session check failed:', error);\n }\n };\n\n const fetchDocuments = async () => {\n try {\n const response = await fetch(\"/list-documents\");\n const docs = await response.json();\n setDocuments(docs);\n } catch (error) {\n console.error(\"Failed to fetch documents:\", error);\n }\n };\n\n const handleAuth = async (event) => {\n event.preventDefault();\n setError(null);\n \n const endpoint = isLogin ? '/login' : '/signup';\n try {\n const response = await fetch(endpoint, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ username, password }),\n });\n\n const result = await response.json();\n \n if (result.success) {\n setUser(result.user);\n fetchDocuments();\n } else {\n setError(result.message);\n }\n } catch (error) {\n setError('Authentication failed');\n console.error('Authentication error:', error);\n }\n };\n\n const handleLogout = async () => {\n try {\n await fetch('/logout', { method: 'POST' });\n setUser(null);\n setDocuments([]);\n } catch (error) {\n console.error('Logout failed:', error);\n }\n };\n\n const handleFileSelect = (event) => {\n setSelectedFile(event.target.files[0]);\n };\n\n const handleUpload = async (event) => {\n event.preventDefault();\n if (!selectedFile) return;\n\n const formData = new FormData();\n formData.append(\"document\", selectedFile);\n\n try {\n const response = await fetch(\"/upload-document\", {\n method: \"POST\",\n body: formData,\n });\n\n if (response.ok) {\n fetchDocuments();\n setSelectedFile(null);\n event.target.reset();\n }\n } catch (error) {\n console.error(\"Upload failed:\", error);\n }\n };\n\n const handleDelete = async (filename) => {\n try {\n const response = await fetch(`/delete-document?filename=${encodeURIComponent(filename)}`, {\n method: \"DELETE\",\n });\n\n if (response.ok) {\n fetchDocuments();\n }\n } catch (error) {\n console.error(\"Delete failed:\", error);\n }\n };\n\n // Authentication or Document View\n const renderContent = () => {\n if (!user) {\n return (\n

{isLogin ? 'Login' : 'Sign Up'}

\n {error &&

{error}

}\n

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

📄 Document Storage

\n \n

\n \n \n Upload Document\n \n \n

Stored Documents

\n {documents.length === 0 ? (\n

No documents uploaded yet

\n ) : (\n

\n
\n {doc.name}\n \n Uploaded {formatRelativeTime(doc.uploadedAt)}\n \n
\n handleDelete(doc.name)}\n style={styles.deleteButton}\n aria-label={`Delete ${doc.name}`}\n >\n 🗑️\n \n

\n )}\n

\n \n View Source\n \n

\n );\n };\n\n return renderContent();\n}\n\nconst styles = {\n header: {\n display: 'flex',\n justifyContent: 'space-between',\n alignItems: 'center',\n marginBottom: '20px'\n },\n logoutButton: {\n padding: '8px 15px',\n backgroundColor: '#f44336',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: 'pointer'\n },\n authContainer: {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100vh',\n fontFamily: 'system-ui, sans-serif'\n },\n authForm: {\n display: 'flex',\n flexDirection: 'column',\n width: '300px',\n gap: '10px'\n },\n authInput: {\n padding: '10px',\n borderRadius: '4px',\n border: '1px solid #ccc'\n },\n authButton: {\n padding: '10px',\n backgroundColor: '#4CAF50',\n color: 'white',\n border: 'none',\n borderRadius: '4px',\n cursor: 'pointer'\n },\n switchAuthMode: {\n textAlign: 'center',\n color: '#666',\n cursor: 'pointer',\n textDecoration: 'underline'\n },\n errorMessage: {\n color: 'red',\n marginBottom: '10px'\n },\n container: {\n fontFamily: \"system-ui, sans-serif\",\n maxWidth: \"100%\",\n width: \"100%\",\n margin: \"0\",\n padding: \"20px\",\n boxSizing: \"border-box\",\n textAlign: \"center\",\n },\n // ... rest of the previous styles remain the same\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = new URL(import.meta.url).pathname.split(\"/\").at(-1);\n\n // Initialize users table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_users (\n username TEXT PRIMARY KEY,\n password TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Session management\n const getCookie = (request) => {\n const cookieHeader = request.headers.get('cookie');\n const cookies = cookieHeader ? Object.fromEntries(\n cookieHeader.split('; ').map(c => c.split('='))\n ) : {};\n return cookies;\n };\n\n // Authentication routes\n if (request.method === 'POST' && new URL(request.url).pathname === '/signup') {\n const { username, password } = await request.json();\n \n // Basic validation\n if (!username || !password) {\n return new Response(JSON.stringify({ \n success: false, \n message: 'Username and password are required' \n }), { status: 400, headers: { 'Content-Type': 'application/json' } });\n }\n\n try {\n const hashedPassword = await hashPassword(password);\n \n await sqlite.execute(\n `INSERT INTO ${KEY}_users (username, password) VALUES (?, ?)`, \n [username, hashedPassword]\n );\n\n return new Response(JSON.stringify({ \n success: true, \n user: { username } \n }), { \n headers: { \n 'Content-Type': 'application/json',\n 'Set-Cookie': `session=${username}; HttpOnly; Path=/; SameSite=Strict`\n } \n });\n } catch (error) {\n return new Response(JSON.stringify({ \n success: false, \n message: 'Username already exists' \n }), { status: 400, headers: { 'Content-Type': 'application/json' } });\n }\n }\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/login') {\n const { username, password } = await request.json();\n const hashedPassword = await hashPassword(password);\n\n const result = await sqlite.execute(\n `SELECT * FROM ${KEY}_users WHERE username = ? AND password = ?`, \n [username, hashedPassword]\n );\n\n if (result.rows.length > 0) {\n return new Response(JSON.stringify({ \n success: true, \n user: { username } \n }), { \n headers: { \n 'Content-Type': 'application/json',\n 'Set-Cookie': `session=${username}; HttpOnly; Path=/; SameSite=Strict`\n } \n });\n } else {\n return new Response(JSON.stringify({ \n success: false, \n message: 'Invalid username or password' \n }), { status: 401, headers: { 'Content-Type': 'application/json' } });\n }\n }\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/logout') {\n return new Response(JSON.stringify({ success: true }), {\n headers: { \n 'Content-Type': 'application/json',\n 'Set-Cookie': 'session=; HttpOnly; Path=/; Max-Age=0'\n }\n });\n }\n\n if (request.method === 'GET' && new URL(request.url).pathname === '/check-session') {\n const cookies = getCookie(request);\n if (cookies.session) {\n return new Response(JSON.stringify({ username: cookies.session }), {\n headers: { 'Content-Type': 'application/json' }\n });\n }\n return new Response(JSON.stringify({}), {\n status: 401,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // User-specific document routes\n const cookies = getCookie(request);\n const currentUser = cookies.session;\n\n if (!currentUser) {\n return new Response('Unauthorized', { status: 401 });\n }\n\n if (request.method === 'GET' && new URL(request.url).pathname === '/list-documents') {\n const documents = await blob.list(`${KEY}_${currentUser}_`);\n const documentDetails = documents.map(doc => ({\n name: doc.key.replace(`${KEY}_${currentUser}_`, \"\"),\n uploadedAt: doc.lastModified,\n })).sort((a, b) => new Date(b.uploadedAt) - new Date(a.uploadedAt));\n\n return new Response(JSON.stringify(documentDetails), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/upload-document') {\n const formData = await request.formData();\n const file = formData.get(\"document\") as File;\n\n if (!file) {\n return new Response(\"No file uploaded\", { status: 400 });\n }\n\n const arrayBuffer = await file.arrayBuffer();\n await blob.set(`${KEY}_${currentUser}_${file.name}`, new Uint8Array(arrayBuffer), {\n metadata: {\n uploadedAt: new Date().toISOString(),\n },\n });\n\n return new Response(\"Document uploaded successfully\", { status: 200 });\n }\n\n if (request.method === 'DELETE' && new URL(request.url).pathname === '/delete-document') {\n const url = new URL(request.url);\n const filename = url.searchParams.get(\"filename\");\n\n if (!filename) {\n return new Response(\"No filename provided\", { status: 400 });\n }\n\n await blob.delete(`${KEY}_${currentUser}_${filename}`);\n return new Response(\"Document deleted successfully\", { status: 200 });\n }\n\n return new Response(\n `\n \n \n Secure Document Storage\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}",["D",1739783006272],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

Document_Storage_System

Version 4