🖼️ Bulk Image Uploader 📸

\n \n {/* Username setup (existing code) */}\n {!isUsernameSet && (\n // ... (previous username setup code)\n )}\n \n {/* Bulk Upload Section */}\n

\n \n \n {selectedFiles.length > 0 && (\n

Selected Files: {selectedFiles.length}

\n \n

\n )}\n\n {isUploading && (\n

Uploading: {uploadProgress}%

\n )}\n

\n\n {/* Pagination Controls */}\n

\n \n Page {currentPage} of {totalPages}\n \n

\n\n {/* Rest of the existing component remains the same */}\n

\n );\n}\n\n// Server-side modifications in handler functions\n\nasync function handleUpload(request, sqlite, KEY, TABLE_VERSION) {\n const formData = await request.formData();\n const image = formData.get('image') as File;\n const username = formData.get('username') as string;\n\n if (!image || !(image instanceof File)) {\n return new Response(JSON.stringify({ message: \"No image uploaded\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));\n const dataUrl = `data:${image.type};base64,${base64Image}`;\n\n await sqlite.execute(`\n INSERT INTO ${KEY}_images_${TABLE_VERSION} (image_url, username) VALUES (?, ?)\n `, [dataUrl, username]);\n\n return new Response(JSON.stringify({ message: \"Upload successful\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n}\n\nasync function handleGetImages(sqlite, KEY, TABLE_VERSION, page = 1, pageSize = 100) {\n const offset = (page - 1) * pageSize;\n\n // Get total number of images\n const totalCountResult = await sqlite.execute(`\n SELECT COUNT(*) as total \n FROM ${KEY}_images_${TABLE_VERSION}\n `);\n const totalImages = totalCountResult.rows[0].total;\n const totalPages = Math.ceil(totalImages / pageSize);\n\n // Get paginated images\n const images = await sqlite.execute(`\n SELECT id, image_url, username \n FROM ${KEY}_images_${TABLE_VERSION} \n ORDER BY uploaded_at DESC \n LIMIT ? OFFSET ?\n `, [pageSize, offset]);\n\n return new Response(JSON.stringify({ \n images: images.rows,\n totalPages: totalPages,\n currentPage: page\n }), { \n headers: { 'Content-Type': 'application/json' }\n });\n}\n\n// Modify the server switch statement to pass page parameter\ncase '/images':\n if (request.method !== 'GET') break;\n const url = new URL(request.url);\n const page = parseInt(url.searchParams.get('page') || '1', 10);\n return await handleGetImages(sqlite, KEY, TABLE_VERSION, page);","deleted","label","children",[],[99],"files",[151],"counts",{"_173":32,"_174":175,"_176":32,"_177":32},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_103":152,"_95":99,"_153":115,"_154":-5,"_155":139,"_156":138,"_157":117,"_105":182,"_100":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":183},["D",1738405520135],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":192,"_180":197,"_200":201,"_242":243,"_254":-7,"_255":32,"_256":22},{"_103":104,"_95":96,"_105":193,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":115,"_116":117,"_118":-5,"_119":32,"_16":120,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":122,"_23":194,"_133":195,"_136":196,"_148":22},["D",1746111448090],{"_93":94,"_131":132},{"_93":94,"_135":132},{"_100":138,"_95":43,"_103":139,"_140":104,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":-5,"_146":96,"_147":94},{"_103":152,"_95":99,"_153":115,"_154":-5,"_155":139,"_156":138,"_157":117,"_105":198,"_100":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":199},["D",1738405520135],[99],"history",[202,204,209,214,219,224,229,234,238],{"_103":152,"_155":139,"_153":115,"_95":99,"_162":163,"_160":161,"_100":159,"_154":-5,"_105":203,"_156":138,"_165":-5},["D",1738405520135],{"_103":205,"_155":139,"_153":115,"_95":99,"_162":206,"_160":161,"_100":207,"_154":-5,"_105":208,"_156":159,"_165":-5},"99a46dae-269c-11f0-9aab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Main React component for the image upload application\nfunction App() {\n // State variables to manage images, error messages, upload restrictions, and comments\n const [images, setImages] = useState([]); // Stores uploaded images\n const [error, setError] = useState(null); // Stores error messages\n const [canUpload, setCanUpload] = useState(true); // Controls upload ability\n const [showComments, setShowComments] = useState(false); // Controls comment visibility\n const [comments, setComments] = useState([]); // Stores comments for images\n const [newComment, setNewComment] = useState(''); // Stores new comment input\n const [username, setUsername] = useState(''); // Stores username\n const [isUsernameSet, setIsUsernameSet] = useState(false); // Tracks if username is set\n\n // Load username from localStorage on component mount\n useEffect(() => {\n const storedUsername = localStorage.getItem('imageAppUsername');\n if (storedUsername) {\n setUsername(storedUsername);\n setIsUsernameSet(true);\n }\n }, []);\n\n // Fetch images and comments when the component first loads\n useEffect(() => {\n fetchImages();\n fetchComments();\n }, []);\n\n // Function to retrieve images from the server\n const fetchImages = async () => {\n try {\n const response = await fetch('/images');\n const data = await response.json();\n setImages(data);\n } catch (err) {\n setError(\"Could not fetch images\");\n console.error(\"Image fetch error:\", err);\n }\n };\n\n // Function to retrieve comments from the server\n const fetchComments = async () => {\n try {\n const response = await fetch('/comments');\n const data = await response.json();\n setComments(data);\n } catch (err) {\n setError(\"Could not fetch comments\");\n console.error(\"Comments fetch error:\", err);\n }\n };\n\n // Handle image deletion\n const handleDeleteImage = async (imageId) => {\n if (!isUsernameSet) {\n setError(\"Please set a username first\");\n return;\n }\n\n try {\n const response = await fetch('/delete-image', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ \n imageId: imageId,\n username: username \n })\n });\n\n if (response.ok) {\n // Remove the image from local state\n setImages(prevImages => prevImages.filter(img => img.id !== imageId));\n setError(null);\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Image deletion failed\");\n }\n } catch (err) {\n console.error(\"Image deletion error:\", err);\n setError(\"Image deletion error: \" + err.message);\n }\n };\n\n // Handle setting username\n const handleSetUsername = () => {\n if (username.trim()) {\n localStorage.setItem('imageAppUsername', username);\n setIsUsernameSet(true);\n }\n };\n\n // Handle image upload process\n const handleUpload = async (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n const formData = new FormData();\n formData.append('image', file);\n formData.append('username', username);\n\n try {\n const response = await fetch('/upload', {\n method: 'POST',\n body: formData\n });\n\n if (response.ok) {\n await fetchImages();\n setCanUpload(false);\n setTimeout(() => setCanUpload(true), 60000);\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Upload failed\");\n }\n } catch (err) {\n setError(\"Upload error\");\n }\n };\n\n // Handle adding a new comment with enhanced error handling\n const handleAddComment = async (e) => {\n // Prevent default form submission if it's a form event\n if (e && e.preventDefault) {\n e.preventDefault();\n }\n\n // Validate comment and username\n if (!newComment.trim()) {\n setError(\"Comment cannot be empty\");\n return;\n }\n\n if (!isUsernameSet) {\n setError(\"Please set a username first\");\n return;\n }\n\n try {\n const response = await fetch('/add-comment', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ \n comment: newComment,\n username: username\n })\n });\n\n if (response.ok) {\n // Immediately update comments locally for instant feedback\n setComments(prevComments => [\n { username: username, comment: newComment },\n ...prevComments\n ]);\n \n // Clear comment input\n setNewComment('');\n \n // Clear any previous errors\n setError(null);\n } else {\n // Try to get error message from response\n const errorData = await response.json();\n setError(errorData.message || \"Comment upload failed\");\n console.error(\"Comment submission error:\", errorData);\n }\n } catch (err) {\n console.error(\"Unexpected comment upload error:\", err);\n setError(\"Comment upload error: \" + err.message);\n }\n };\n\n // Render the application UI\n return (\n

🖼️ One Image Per Minute 🕒

\n \n {/* Username setup */}\n {!isUsernameSet && (\n

\n setUsername(e.target.value)}\n placeholder=\"Enter your username\"\n style={{ \n padding: '5px', \n marginRight: '10px',\n borderRadius: '5px',\n border: '1px solid #ccc'\n }}\n />\n \n

\n )}\n \n {/* Display error messages if any */}\n {error &&

\n {error}\n

}\n \n {/* File input for image upload */}\n \n \n {/* Show waiting message when upload is disabled */}\n {!canUpload &&

Wait 1 minute between uploads

}\n \n {/* Button to toggle comments */}\n \n\n {/* Comments section */}\n {showComments && isUsernameSet && (\n

\n {/* Comment input */}\n \n\n {/* Comments list */}\n

\n {comments.map((comment, index) => (\n

\n {comment.username}: {comment.comment}\n

\n ))}\n

\n )}\n \n {/* Grid display for uploaded images */}\n

\n {/* Map and render each uploaded image */}\n {images.map((img, index) => (\n

\n {/* Delete button (only visible to the uploader) */}\n {img.username === username && (\n \n )}\n

\n ))}\n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n }\n\n // Default error response\n return new Response(JSON.stringify({ message: \"Invalid request\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n console.error(\"Server error:\", error);\n return new Response(JSON.stringify({ message: \"Internal server error\" }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n}\n\n// Separate handler functions to reduce complexity\n\nasync function handleUpload(request, sqlite, KEY, TABLE_VERSION) {\n const formData = await request.formData();\n const image = formData.get('image') as File;\n const username = formData.get('username') as string;\n\n if (!image || !(image instanceof File)) {\n return new Response(JSON.stringify({ message: \"No image uploaded\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n const lastUpload = await sqlite.execute(`\n SELECT uploaded_at \n FROM ${KEY}_images_${TABLE_VERSION} \n ORDER BY uploaded_at DESC \n LIMIT 1\n `);\n\n const canUpload = !lastUpload.rows.length || \n (Date.now() - new Date(lastUpload.rows[0].uploaded_at).getTime() > 60000);\n\n if (!canUpload) {\n return new Response(JSON.stringify({ message: \"Wait 1 minute between uploads\" }), { \n status: 429,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));\n const dataUrl = `data:${image.type};base64,${base64Image}`;\n\n await sqlite.execute(`\n INSERT INTO ${KEY}_images_${TABLE_VERSION} (image_url, username) VALUES (?, ?)\n `, [dataUrl, username]);\n\n return new Response(JSON.stringify({ message: \"Upload successful\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n}\n\nasync function handleDeleteImage(request, sqlite, KEY, TABLE_VERSION) {\n const body = await request.json();\n const imageId = body.imageId;\n const username = body.username;\n\n if (!imageId || !username) {\n return new Response(JSON.stringify({ message: \"Invalid deletion request\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n const imageCheck = await sqlite.execute(`\n SELECT username \n FROM ${KEY}_images_${TABLE_VERSION} \n WHERE id = ?\n `, [imageId]);\n\n if (imageCheck.rows.length === 0 || imageCheck.rows[0].username !== username) {\n return new Response(JSON.stringify({ message: \"Not authorized to delete this image\" }), { \n status: 403,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n await sqlite.execute(`\n DELETE FROM ${KEY}_images_${TABLE_VERSION} \n WHERE id = ?\n `, [imageId]);\n\n return new Response(JSON.stringify({ message: \"Image deleted successfully\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n}\n\nasync function handleGetImages(sqlite, KEY, TABLE_VERSION) {\n const images = await sqlite.execute(`\n SELECT id, image_url, username \n FROM ${KEY}_images_${TABLE_VERSION} \n ORDER BY uploaded_at DESC \n LIMIT 20\n `);\n\n return new Response(JSON.stringify(images.rows), { \n headers: { 'Content-Type': 'application/json' }\n });\n}\n\nasync function handleGetComments(sqlite, KEY, TABLE_VERSION) {\n const comments = await sqlite.execute(`\n SELECT username, comment \n FROM ${KEY}_comments_${TABLE_VERSION} \n ORDER BY created_at DESC \n LIMIT 20\n `);\n\n return new Response(JSON.stringify(comments.rows), { \n headers: { 'Content-Type': 'application/json' }\n });\n}\n\nasync function handleAddComment(request, sqlite, KEY, TABLE_VERSION) {\n const body = await request.json();\n const comment = body.comment;\n const username = body.username;\n\n if (!comment || comment.trim() === '' || !username || username.trim() === '') {\n return new Response(JSON.stringify({ message: \"Comment or username cannot be empty\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n await sqlite.execute(`\n INSERT INTO ${KEY}_comments_${TABLE_VERSION} (username, comment) VALUES (?, ?)\n `, [username, comment]);\n\n return new Response(JSON.stringify({ message: \"Comment added successfully\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n}",7,["D",1738405467926],{"_103":210,"_155":139,"_153":115,"_95":99,"_162":211,"_160":161,"_100":212,"_154":-5,"_105":213,"_156":207,"_165":-5},"99a010a6-269c-11f0-9aab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Main React component for the image upload application\nfunction App() {\n // State variables to manage images, error messages, upload restrictions, and comments\n const [images, setImages] = useState([]); // Stores uploaded images\n const [error, setError] = useState(null); // Stores error messages\n const [canUpload, setCanUpload] = useState(true); // Controls upload ability\n const [showComments, setShowComments] = useState(false); // Controls comment visibility\n const [comments, setComments] = useState([]); // Stores comments for images\n const [newComment, setNewComment] = useState(''); // Stores new comment input\n const [username, setUsername] = useState(''); // Stores username\n const [isUsernameSet, setIsUsernameSet] = useState(false); // Tracks if username is set\n\n // Load username from localStorage on component mount\n useEffect(() => {\n const storedUsername = localStorage.getItem('imageAppUsername');\n if (storedUsername) {\n setUsername(storedUsername);\n setIsUsernameSet(true);\n }\n }, []);\n\n // Fetch images and comments when the component first loads\n useEffect(() => {\n fetchImages();\n fetchComments();\n }, []);\n\n // Function to retrieve images from the server\n const fetchImages = async () => {\n try {\n const response = await fetch('/images');\n const data = await response.json();\n setImages(data);\n } catch (err) {\n setError(\"Could not fetch images\");\n console.error(\"Image fetch error:\", err);\n }\n };\n\n // Function to retrieve comments from the server\n const fetchComments = async () => {\n try {\n const response = await fetch('/comments');\n const data = await response.json();\n console.log(\"Fetched comments:\", data); // Debug log\n setComments(data);\n } catch (err) {\n setError(\"Could not fetch comments\");\n console.error(\"Comments fetch error:\", err);\n }\n };\n\n // Handle image deletion\n const handleDeleteImage = async (imageId) => {\n if (!isUsernameSet) {\n setError(\"Please set a username first\");\n return;\n }\n\n try {\n const response = await fetch('/delete-image', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ \n imageId: imageId,\n username: username \n })\n });\n\n if (response.ok) {\n // Remove the image from local state\n setImages(prevImages => prevImages.filter(img => img.id !== imageId));\n setError(null);\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Image deletion failed\");\n }\n } catch (err) {\n console.error(\"Image deletion error:\", err);\n setError(\"Image deletion error: \" + err.message);\n }\n };\n\n // Handle setting username\n const handleSetUsername = () => {\n if (username.trim()) {\n localStorage.setItem('imageAppUsername', username);\n setIsUsernameSet(true);\n }\n };\n\n // Handle image upload process\n const handleUpload = async (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n const formData = new FormData();\n formData.append('image', file);\n formData.append('username', username);\n\n try {\n const response = await fetch('/upload', {\n method: 'POST',\n body: formData\n });\n\n if (response.ok) {\n await fetchImages();\n setCanUpload(false);\n setTimeout(() => setCanUpload(true), 60000);\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Upload failed\");\n }\n } catch (err) {\n setError(\"Upload error\");\n }\n };\n\n // Handle adding a new comment with enhanced error handling\n const handleAddComment = async (e) => {\n // Prevent default form submission if it's a form event\n if (e && e.preventDefault) {\n e.preventDefault();\n }\n\n // Validate comment and username\n if (!newComment.trim()) {\n setError(\"Comment cannot be empty\");\n return;\n }\n\n if (!isUsernameSet) {\n setError(\"Please set a username first\");\n return;\n }\n\n try {\n console.log(\"Sending comment:\", { \n comment: newComment, \n username: username \n }); // Debug log\n\n const response = await fetch('/add-comment', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ \n comment: newComment,\n username: username\n })\n });\n\n // Log the full response for debugging\n console.log(\"Comment submission response:\", response);\n\n if (response.ok) {\n // Immediately update comments locally for instant feedback\n setComments(prevComments => [\n { username: username, comment: newComment },\n ...prevComments\n ]);\n \n // Fetch fresh comments from server to ensure consistency\n await fetchComments();\n \n // Clear comment input\n setNewComment('');\n \n // Clear any previous errors\n setError(null);\n } else {\n // Try to get error message from response\n const errorData = await response.json();\n setError(errorData.message || \"Comment upload failed\");\n console.error(\"Comment submission error:\", errorData);\n }\n } catch (err) {\n console.error(\"Unexpected comment upload error:\", err);\n setError(\"Comment upload error: \" + err.message);\n }\n };\n\n // Render the application UI\n return (\n

🖼️ One Image Per Minute 🕒

\n \n {/* Username setup */}\n {!isUsernameSet && (\n

\n setUsername(e.target.value)}\n placeholder=\"Enter your username\"\n style={{ \n padding: '5px', \n marginRight: '10px',\n borderRadius: '5px',\n border: '1px solid #ccc'\n }}\n />\n \n

\n )}\n \n {/* Display error messages if any */}\n {error &&

\n {error}\n

}\n \n {/* File input for image upload */}\n \n \n {/* Show waiting message when upload is disabled */}\n {!canUpload &&

Wait 1 minute between uploads

}\n \n {/* Button to toggle comments */}\n \n\n {/* Comments section */}\n {showComments && isUsernameSet && (\n

\n {/* Comment input */}\n \n\n {/* Comments list */}\n

\n {comments.map((comment, index) => (\n

\n {comment.username}: {comment.comment}\n

\n ))}\n

\n )}\n \n {/* Grid display for uploaded images */}\n

\n {/* Map and render each uploaded image */}\n {images.map((img, index) => (\n

\n {/* Delete button (only visible to the uploader) */}\n {img.username === username && (\n \n )}\n

\n ))}\n

\n );\n}\n\n// Client-side rendering function\nfunction client() {\n // Render React app in the root element\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Render client-side code only in browser environment\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side request handler\nexport default async function server(request: Request): Promise {\n // Dynamically import SQLite for server-side storage\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n \n // Generate a unique key based on the val's URL\n const KEY = \"imageUploadPerMinuteWebsite\";\n\n // Increment table version to create a fresh table with username column\n const TABLE_VERSION = 4;\n\n // Create images and comments tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_images_${TABLE_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n image_url TEXT NOT NULL,\n username TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_comments_${TABLE_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n comment TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle image upload endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/upload') {\n // Parse uploaded file from form data\n const formData = await request.formData();\n const image = formData.get('image') as File;\n const username = formData.get('username') as string;\n\n // Validate image upload\n if (!image || !(image instanceof File)) {\n return new Response(JSON.stringify({ message: \"No image uploaded\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Check last upload time to enforce 1-minute limit\n const lastUpload = await sqlite.execute(`\n SELECT uploaded_at \n FROM ${KEY}_images_${TABLE_VERSION} \n ORDER BY uploaded_at DESC \n LIMIT 1\n `);\n\n // Determine if upload is allowed (first upload or > 1 minute since last)\n const canUpload = !lastUpload.rows.length || \n (Date.now() - new Date(lastUpload.rows[0].uploaded_at).getTime() > 60000);\n\n // Reject upload if time limit not met\n if (!canUpload) {\n return new Response(JSON.stringify({ message: \"Wait 1 minute between uploads\" }), { \n status: 429,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Convert image to base64 data URL for storage\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));\n const dataUrl = `data:${image.type};base64,${base64Image}`;\n\n // Store image URL in SQLite database\n const result = await sqlite.execute(`\n INSERT INTO ${KEY}_images_${TABLE_VERSION} (image_url, username) VALUES (?, ?)\n `, [dataUrl, username]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Upload successful\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle image deletion endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/delete-image') {\n const body = await request.json();\n const imageId = body.imageId;\n const username = body.username;\n\n // Validate image deletion request\n if (!imageId || !username) {\n return new Response(JSON.stringify({ message: \"Invalid deletion request\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Check if the user is the original uploader\n const imageCheck = await sqlite.execute(`\n SELECT username \n FROM ${KEY}_images_${TABLE_VERSION} \n WHERE id = ?\n `, [imageId]);\n\n if (imageCheck.rows.length === 0 || imageCheck.rows[0].username !== username) {\n return new Response(JSON.stringify({ message: \"Not authorized to delete this image\" }), { \n status: 403,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Delete the image\n await sqlite.execute(`\n DELETE FROM ${KEY}_images_${TABLE_VERSION} \n WHERE id = ?\n `, [imageId]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Image deleted successfully\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle images retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/images') {\n // Fetch 20 most recent images from database\n const images = await sqlite.execute(`\n SELECT id, image_url, username \n FROM ${KEY}_images_${TABLE_VERSION} \n ORDER BY uploaded_at DESC \n LIMIT 20\n `);\n\n // Return images as JSON\n return new Response(JSON.stringify(images.rows), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle comments retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/comments') {\n // Fetch 20 most recent comments from database\n const comments = await sqlite.execute(`\n SELECT username, comment \n FROM ${KEY}_comments_${TABLE_VERSION} \n ORDER BY created_at DESC \n LIMIT 20\n `);\n\n // Return comments as JSON\n return new Response(JSON.stringify(comments.rows), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Serve initial HTML page\n return new Response(`\n \n \n One Image Per Minute 🖼️\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",6,["D",1738405361897],{"_103":215,"_155":139,"_153":115,"_95":99,"_162":216,"_160":161,"_100":217,"_154":-5,"_105":218,"_156":212,"_165":-5},"999bba4c-269c-11f0-9aab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Main React component for the image upload application\nfunction App() {\n // State variables to manage images, error messages, upload restrictions, and comments\n const [images, setImages] = useState([]); // Stores uploaded images\n const [error, setError] = useState(null); // Stores error messages\n const [canUpload, setCanUpload] = useState(true); // Controls upload ability\n const [showComments, setShowComments] = useState(false); // Controls comment visibility\n const [comments, setComments] = useState([]); // Stores comments for images\n const [newComment, setNewComment] = useState(''); // Stores new comment input\n const [username, setUsername] = useState(''); // Stores username\n const [isUsernameSet, setIsUsernameSet] = useState(false); // Tracks if username is set\n\n // Load username from localStorage on component mount\n useEffect(() => {\n const storedUsername = localStorage.getItem('imageAppUsername');\n if (storedUsername) {\n setUsername(storedUsername);\n setIsUsernameSet(true);\n }\n }, []);\n\n // Fetch images and comments when the component first loads\n useEffect(() => {\n fetchImages();\n fetchComments();\n }, []);\n\n // Function to retrieve images from the server\n const fetchImages = async () => {\n try {\n const response = await fetch('/images');\n const data = await response.json();\n setImages(data);\n } catch (err) {\n setError(\"Could not fetch images\");\n console.error(\"Image fetch error:\", err);\n }\n };\n\n // Function to retrieve comments from the server\n const fetchComments = async () => {\n try {\n const response = await fetch('/comments');\n const data = await response.json();\n console.log(\"Fetched comments:\", data); // Debug log\n setComments(data);\n } catch (err) {\n setError(\"Could not fetch comments\");\n console.error(\"Comments fetch error:\", err);\n }\n };\n\n // Handle setting username\n const handleSetUsername = () => {\n if (username.trim()) {\n localStorage.setItem('imageAppUsername', username);\n setIsUsernameSet(true);\n }\n };\n\n // Handle image upload process\n const handleUpload = async (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n const formData = new FormData();\n formData.append('image', file);\n\n try {\n const response = await fetch('/upload', {\n method: 'POST',\n body: formData\n });\n\n if (response.ok) {\n await fetchImages();\n setCanUpload(false);\n setTimeout(() => setCanUpload(true), 60000);\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Upload failed\");\n }\n } catch (err) {\n setError(\"Upload error\");\n }\n };\n\n // Handle adding a new comment with enhanced error handling\n const handleAddComment = async (e) => {\n // Prevent default form submission if it's a form event\n if (e && e.preventDefault) {\n e.preventDefault();\n }\n\n // Validate comment and username\n if (!newComment.trim()) {\n setError(\"Comment cannot be empty\");\n return;\n }\n\n if (!isUsernameSet) {\n setError(\"Please set a username first\");\n return;\n }\n\n try {\n console.log(\"Sending comment:\", { \n comment: newComment, \n username: username \n }); // Debug log\n\n const response = await fetch('/add-comment', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ \n comment: newComment,\n username: username\n })\n });\n\n // Log the full response for debugging\n console.log(\"Comment submission response:\", response);\n\n if (response.ok) {\n // Immediately update comments locally for instant feedback\n setComments(prevComments => [\n { username: username, comment: newComment },\n ...prevComments\n ]);\n \n // Fetch fresh comments from server to ensure consistency\n await fetchComments();\n \n // Clear comment input\n setNewComment('');\n \n // Clear any previous errors\n setError(null);\n } else {\n // Try to get error message from response\n const errorData = await response.json();\n setError(errorData.message || \"Comment upload failed\");\n console.error(\"Comment submission error:\", errorData);\n }\n } catch (err) {\n console.error(\"Unexpected comment upload error:\", err);\n setError(\"Comment upload error: \" + err.message);\n }\n };\n\n // Render the application UI\n return (\n

🖼️ One Image Per Minute 🕒

\n \n {/* Username setup */}\n {!isUsernameSet && (\n

\n setUsername(e.target.value)}\n placeholder=\"Enter your username\"\n style={{ \n padding: '5px', \n marginRight: '10px',\n borderRadius: '5px',\n border: '1px solid #ccc'\n }}\n />\n \n

\n )}\n \n {/* Display error messages if any */}\n {error &&

\n {error}\n

}\n \n {/* File input for image upload */}\n \n \n {/* Show waiting message when upload is disabled */}\n {!canUpload &&

Wait 1 minute between uploads

}\n \n {/* Button to toggle comments */}\n \n\n {/* Comments section */}\n {showComments && isUsernameSet && (\n

\n {/* Comment input */}\n \n\n {/* Comments list */}\n

\n {comments.map((comment, index) => (\n

\n {comment.username}: {comment.comment}\n

\n ))}\n

\n )}\n \n {/* Grid display for uploaded images */}\n

\n {/* Map and render each uploaded image */}\n {images.map((img, index) => (\n

\n ))}\n

\n );\n}\n\n// Client-side rendering function\nfunction client() {\n // Render React app in the root element\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Render client-side code only in browser environment\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side request handler\nexport default async function server(request: Request): Promise {\n // Dynamically import SQLite for server-side storage\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n \n // Generate a unique key based on the val's URL\n const KEY = \"imageUploadPerMinuteWebsite\";\n\n // Increment table version to create a fresh table with username column\n const TABLE_VERSION = 3;\n\n // Create images and comments tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_images_${TABLE_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n image_url TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_comments_${TABLE_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n comment TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle image upload endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/upload') {\n // Parse uploaded file from form data\n const formData = await request.formData();\n const image = formData.get('image') as File;\n\n // Validate image upload\n if (!image || !(image instanceof File)) {\n return new Response(JSON.stringify({ message: \"No image uploaded\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Check last upload time to enforce 1-minute limit\n const lastUpload = await sqlite.execute(`\n SELECT uploaded_at \n FROM ${KEY}_images_${TABLE_VERSION} \n ORDER BY uploaded_at DESC \n LIMIT 1\n `);\n\n // Determine if upload is allowed (first upload or > 1 minute since last)\n const canUpload = !lastUpload.rows.length || \n (Date.now() - new Date(lastUpload.rows[0].uploaded_at).getTime() > 60000);\n\n // Reject upload if time limit not met\n if (!canUpload) {\n return new Response(JSON.stringify({ message: \"Wait 1 minute between uploads\" }), { \n status: 429,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Convert image to base64 data URL for storage\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));\n const dataUrl = `data:${image.type};base64,${base64Image}`;\n\n // Store image URL in SQLite database\n await sqlite.execute(`\n INSERT INTO ${KEY}_images_${TABLE_VERSION} (image_url) VALUES (?)\n `, [dataUrl]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Upload successful\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle comment addition endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/add-comment') {\n const body = await request.json();\n const comment = body.comment;\n const username = body.username;\n\n // Validate comment and username\n if (!comment || comment.trim() === '' || !username || username.trim() === '') {\n return new Response(JSON.stringify({ message: \"Comment or username cannot be empty\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Store comment in SQLite database\n try {\n await sqlite.execute(`\n INSERT INTO ${KEY}_comments_${TABLE_VERSION} (username, comment) VALUES (?, ?)\n `, [username, comment]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Comment added successfully\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n console.error(\"Database insertion error:\", error);\n return new Response(JSON.stringify({ message: \"Failed to add comment\" }), { \n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n // Handle images retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/images') {\n // Fetch 20 most recent images from database\n const images = await sqlite.execute(`\n SELECT image_url \n FROM ${KEY}_images_${TABLE_VERSION} \n ORDER BY uploaded_at DESC \n LIMIT 20\n `);\n\n // Return images as JSON\n return new Response(JSON.stringify(images.rows.map(row => row.image_url)), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle comments retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/comments') {\n // Fetch 20 most recent comments from database\n const comments = await sqlite.execute(`\n SELECT username, comment \n FROM ${KEY}_comments_${TABLE_VERSION} \n ORDER BY created_at DESC \n LIMIT 20\n `);\n\n // Return comments as JSON\n return new Response(JSON.stringify(comments.rows), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Serve initial HTML page\n return new Response(`\n \n \n One Image Per Minute 🖼️\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",5,["D",1738405224759],{"_103":220,"_155":139,"_153":115,"_95":99,"_162":221,"_160":161,"_100":222,"_154":-5,"_105":223,"_156":217,"_165":-5},"9997c626-269c-11f0-9aab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Main React component for the image upload application\nfunction App() {\n // State variables to manage images, error messages, upload restrictions, and comments\n const [images, setImages] = useState([]); // Stores uploaded images\n const [error, setError] = useState(null); // Stores error messages\n const [canUpload, setCanUpload] = useState(true); // Controls upload ability\n const [showComments, setShowComments] = useState(false); // Controls comment visibility\n const [comments, setComments] = useState([]); // Stores comments for images\n const [newComment, setNewComment] = useState(''); // Stores new comment input\n const [username, setUsername] = useState(''); // Stores username\n const [isUsernameSet, setIsUsernameSet] = useState(false); // Tracks if username is set\n\n // Load username from localStorage on component mount\n useEffect(() => {\n const storedUsername = localStorage.getItem('imageAppUsername');\n if (storedUsername) {\n setUsername(storedUsername);\n setIsUsernameSet(true);\n }\n }, []);\n\n // Fetch images and comments when the component first loads\n useEffect(() => {\n fetchImages();\n fetchComments();\n }, []);\n\n // Function to retrieve images from the server\n const fetchImages = async () => {\n try {\n const response = await fetch('/images');\n const data = await response.json();\n setImages(data);\n } catch (err) {\n setError(\"Could not fetch images\");\n }\n };\n\n // Function to retrieve comments from the server\n const fetchComments = async () => {\n try {\n const response = await fetch('/comments');\n const data = await response.json();\n setComments(data);\n } catch (err) {\n setError(\"Could not fetch comments\");\n }\n };\n\n // Handle setting username\n const handleSetUsername = () => {\n if (username.trim()) {\n localStorage.setItem('imageAppUsername', username);\n setIsUsernameSet(true);\n }\n };\n\n // Handle image upload process\n const handleUpload = async (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n const formData = new FormData();\n formData.append('image', file);\n\n try {\n const response = await fetch('/upload', {\n method: 'POST',\n body: formData\n });\n\n if (response.ok) {\n await fetchImages();\n setCanUpload(false);\n setTimeout(() => setCanUpload(true), 60000);\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Upload failed\");\n }\n } catch (err) {\n setError(\"Upload error\");\n }\n };\n\n // Handle adding a new comment\n const handleAddComment = async () => {\n if (!newComment.trim() || !isUsernameSet) return;\n\n try {\n const response = await fetch('/add-comment', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ \n comment: newComment,\n username: username\n })\n });\n\n if (response.ok) {\n await fetchComments();\n setNewComment('');\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Comment upload failed\");\n }\n } catch (err) {\n setError(\"Comment upload error\");\n }\n };\n\n // Render the application UI\n return (\n

🖼️ One Image Per Minute 🕒

\n \n {/* Username setup */}\n {!isUsernameSet && (\n

\n setUsername(e.target.value)}\n placeholder=\"Enter your username\"\n style={{ \n padding: '5px', \n marginRight: '10px',\n borderRadius: '5px',\n border: '1px solid #ccc'\n }}\n />\n \n

\n )}\n \n {/* Display error messages if any */}\n {error &&

{error}

}\n \n {/* File input for image upload */}\n \n \n {/* Show waiting message when upload is disabled */}\n {!canUpload &&

Wait 1 minute between uploads

}\n \n {/* Button to toggle comments */}\n \n\n {/* Comments section */}\n {showComments && isUsernameSet && (\n

\n {/* Comment input */}\n

\n setNewComment(e.target.value)}\n placeholder=\"Add a comment...\"\n style={{ \n flex: 1, \n padding: '5px', \n marginRight: '10px',\n borderRadius: '5px',\n border: '1px solid #ccc'\n }}\n />\n \n

\n\n {/* Comments list */}\n

\n {comments.map((comment, index) => (\n

\n {comment.username}: {comment.comment}\n

\n ))}\n

\n )}\n \n {/* Grid display for uploaded images */}\n

\n {/* Map and render each uploaded image */}\n {images.map((img, index) => (\n

\n ))}\n

\n );\n}\n\n// Client-side rendering function\nfunction client() {\n // Render React app in the root element\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Render client-side code only in browser environment\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side request handler\nexport default async function server(request: Request): Promise {\n // Dynamically import SQLite for server-side storage\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n \n // Generate a unique key based on the val's URL\n const KEY = \"imageUploadPerMinuteWebsite\";\n\n // Increment table version to create a fresh table with username column\n const TABLE_VERSION = 2;\n\n // Create images and comments tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_images_${TABLE_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n image_url TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_comments_${TABLE_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n comment TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle image upload endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/upload') {\n // Parse uploaded file from form data\n const formData = await request.formData();\n const image = formData.get('image') as File;\n\n // Validate image upload\n if (!image || !(image instanceof File)) {\n return new Response(JSON.stringify({ message: \"No image uploaded\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Check last upload time to enforce 1-minute limit\n const lastUpload = await sqlite.execute(`\n SELECT uploaded_at \n FROM ${KEY}_images_${TABLE_VERSION} \n ORDER BY uploaded_at DESC \n LIMIT 1\n `);\n\n // Determine if upload is allowed (first upload or > 1 minute since last)\n const canUpload = !lastUpload.rows.length || \n (Date.now() - new Date(lastUpload.rows[0].uploaded_at).getTime() > 60000);\n\n // Reject upload if time limit not met\n if (!canUpload) {\n return new Response(JSON.stringify({ message: \"Wait 1 minute between uploads\" }), { \n status: 429,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Convert image to base64 data URL for storage\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));\n const dataUrl = `data:${image.type};base64,${base64Image}`;\n\n // Store image URL in SQLite database\n await sqlite.execute(`\n INSERT INTO ${KEY}_images_${TABLE_VERSION} (image_url) VALUES (?)\n `, [dataUrl]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Upload successful\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle comment addition endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/add-comment') {\n const body = await request.json();\n const comment = body.comment;\n const username = body.username;\n\n // Validate comment and username\n if (!comment || comment.trim() === '' || !username || username.trim() === '') {\n return new Response(JSON.stringify({ message: \"Comment or username cannot be empty\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Store comment in SQLite database\n await sqlite.execute(`\n INSERT INTO ${KEY}_comments_${TABLE_VERSION} (username, comment) VALUES (?, ?)\n `, [username, comment]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Comment added successfully\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle images retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/images') {\n // Fetch 20 most recent images from database\n const images = await sqlite.execute(`\n SELECT image_url \n FROM ${KEY}_images_${TABLE_VERSION} \n ORDER BY uploaded_at DESC \n LIMIT 20\n `);\n\n // Return images as JSON\n return new Response(JSON.stringify(images.rows.map(row => row.image_url)), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle comments retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/comments') {\n // Fetch 20 most recent comments from database\n const comments = await sqlite.execute(`\n SELECT username, comment \n FROM ${KEY}_comments_${TABLE_VERSION} \n ORDER BY created_at DESC \n LIMIT 20\n `);\n\n // Return comments as JSON\n return new Response(JSON.stringify(comments.rows), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Serve initial HTML page\n return new Response(`\n \n \n One Image Per Minute 🖼️\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",4,["D",1738405127138],{"_103":225,"_155":139,"_153":115,"_95":99,"_162":226,"_160":161,"_100":227,"_154":-5,"_105":228,"_156":222,"_165":-5},"9993daac-269c-11f0-9aab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Main React component for the image upload application\nfunction App() {\n // State variables to manage images, error messages, upload restrictions, and comments\n const [images, setImages] = useState([]); // Stores uploaded images\n const [error, setError] = useState(null); // Stores error messages\n const [canUpload, setCanUpload] = useState(true); // Controls upload ability\n const [showComments, setShowComments] = useState(false); // Controls comment visibility\n const [comments, setComments] = useState([]); // Stores comments for images\n const [newComment, setNewComment] = useState(''); // Stores new comment input\n const [username, setUsername] = useState(''); // Stores username\n const [isUsernameSet, setIsUsernameSet] = useState(false); // Tracks if username is set\n\n // Load username from localStorage on component mount\n useEffect(() => {\n const storedUsername = localStorage.getItem('imageAppUsername');\n if (storedUsername) {\n setUsername(storedUsername);\n setIsUsernameSet(true);\n }\n }, []);\n\n // Fetch images and comments when the component first loads\n useEffect(() => {\n fetchImages();\n fetchComments();\n }, []);\n\n // Function to retrieve images from the server\n const fetchImages = async () => {\n try {\n const response = await fetch('/images');\n const data = await response.json();\n setImages(data);\n } catch (err) {\n setError(\"Could not fetch images\");\n }\n };\n\n // Function to retrieve comments from the server\n const fetchComments = async () => {\n try {\n const response = await fetch('/comments');\n const data = await response.json();\n setComments(data);\n } catch (err) {\n setError(\"Could not fetch comments\");\n }\n };\n\n // Handle setting username\n const handleSetUsername = () => {\n if (username.trim()) {\n localStorage.setItem('imageAppUsername', username);\n setIsUsernameSet(true);\n }\n };\n\n // Handle image upload process\n const handleUpload = async (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n const formData = new FormData();\n formData.append('image', file);\n\n try {\n const response = await fetch('/upload', {\n method: 'POST',\n body: formData\n });\n\n if (response.ok) {\n await fetchImages();\n setCanUpload(false);\n setTimeout(() => setCanUpload(true), 60000);\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Upload failed\");\n }\n } catch (err) {\n setError(\"Upload error\");\n }\n };\n\n // Handle adding a new comment\n const handleAddComment = async () => {\n if (!newComment.trim() || !isUsernameSet) return;\n\n try {\n const response = await fetch('/add-comment', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ \n comment: newComment,\n username: username\n })\n });\n\n if (response.ok) {\n await fetchComments();\n setNewComment('');\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Comment upload failed\");\n }\n } catch (err) {\n setError(\"Comment upload error\");\n }\n };\n\n // Render the application UI\n return (\n

🖼️ One Image Per Minute 🕒

\n \n {/* Username setup */}\n {!isUsernameSet && (\n

\n setUsername(e.target.value)}\n placeholder=\"Enter your username\"\n style={{ \n padding: '5px', \n marginRight: '10px',\n borderRadius: '5px',\n border: '1px solid #ccc'\n }}\n />\n \n

\n )}\n \n {/* Display error messages if any */}\n {error &&

{error}

}\n \n {/* File input for image upload */}\n \n \n {/* Show waiting message when upload is disabled */}\n {!canUpload &&

Wait 1 minute between uploads

}\n \n {/* Button to toggle comments */}\n \n\n {/* Comments section */}\n {showComments && isUsernameSet && (\n

\n {/* Comment input */}\n

\n setNewComment(e.target.value)}\n placeholder=\"Add a comment...\"\n style={{ \n flex: 1, \n padding: '5px', \n marginRight: '10px',\n borderRadius: '5px',\n border: '1px solid #ccc'\n }}\n />\n \n

\n\n {/* Comments list */}\n

\n {comments.map((comment, index) => (\n

\n {comment.username}: {comment.comment}\n

\n ))}\n

\n )}\n \n {/* Grid display for uploaded images */}\n

\n {/* Map and render each uploaded image */}\n {images.map((img, index) => (\n

\n ))}\n

\n );\n}\n\n// Client-side rendering function\nfunction client() {\n // Render React app in the root element\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Render client-side code only in browser environment\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side request handler\nexport default async function server(request: Request): Promise {\n // Dynamically import SQLite for server-side storage\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n \n // Generate a unique key based on the val's URL\n const KEY = \"imageUploadPerMinuteWebsite\";\n\n // Create images and comments tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_images (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n image_url TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_comments (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n comment TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle image upload endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/upload') {\n // Parse uploaded file from form data\n const formData = await request.formData();\n const image = formData.get('image') as File;\n\n // Validate image upload\n if (!image || !(image instanceof File)) {\n return new Response(JSON.stringify({ message: \"No image uploaded\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Check last upload time to enforce 1-minute limit\n const lastUpload = await sqlite.execute(`\n SELECT uploaded_at \n FROM ${KEY}_images \n ORDER BY uploaded_at DESC \n LIMIT 1\n `);\n\n // Determine if upload is allowed (first upload or > 1 minute since last)\n const canUpload = !lastUpload.rows.length || \n (Date.now() - new Date(lastUpload.rows[0].uploaded_at).getTime() > 60000);\n\n // Reject upload if time limit not met\n if (!canUpload) {\n return new Response(JSON.stringify({ message: \"Wait 1 minute between uploads\" }), { \n status: 429,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Convert image to base64 data URL for storage\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));\n const dataUrl = `data:${image.type};base64,${base64Image}`;\n\n // Store image URL in SQLite database\n await sqlite.execute(`\n INSERT INTO ${KEY}_images (image_url) VALUES (?)\n `, [dataUrl]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Upload successful\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle comment addition endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/add-comment') {\n const body = await request.json();\n const comment = body.comment;\n const username = body.username;\n\n // Validate comment and username\n if (!comment || comment.trim() === '' || !username || username.trim() === '') {\n return new Response(JSON.stringify({ message: \"Comment or username cannot be empty\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Store comment in SQLite database\n await sqlite.execute(`\n INSERT INTO ${KEY}_comments (username, comment) VALUES (?, ?)\n `, [username, comment]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Comment added successfully\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle images retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/images') {\n // Fetch 20 most recent images from database\n const images = await sqlite.execute(`\n SELECT image_url \n FROM ${KEY}_images \n ORDER BY uploaded_at DESC \n LIMIT 20\n `);\n\n // Return images as JSON\n return new Response(JSON.stringify(images.rows.map(row => row.image_url)), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle comments retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/comments') {\n // Fetch 20 most recent comments from database\n const comments = await sqlite.execute(`\n SELECT username, comment \n FROM ${KEY}_comments \n ORDER BY created_at DESC \n LIMIT 20\n `);\n\n // Return comments as JSON\n return new Response(JSON.stringify(comments.rows), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Serve initial HTML page\n return new Response(`\n \n \n One Image Per Minute 🖼️\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",3,["D",1738405006995],{"_103":230,"_155":139,"_153":115,"_95":99,"_162":231,"_160":161,"_100":232,"_154":-5,"_105":233,"_156":227,"_165":-5},"998f6dc8-269c-11f0-9aab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Main React component for the image upload application\nfunction App() {\n // State variables to manage images, error messages, upload restrictions, and comments\n const [images, setImages] = useState([]); // Stores uploaded images\n const [error, setError] = useState(null); // Stores error messages\n const [canUpload, setCanUpload] = useState(true); // Controls upload ability\n const [showComments, setShowComments] = useState(false); // Controls comment visibility\n const [comments, setComments] = useState([]); // Stores comments for images\n const [newComment, setNewComment] = useState(''); // Stores new comment input\n\n // Fetch images and comments when the component first loads\n useEffect(() => {\n fetchImages();\n fetchComments();\n }, []);\n\n // Function to retrieve images from the server\n const fetchImages = async () => {\n try {\n const response = await fetch('/images');\n const data = await response.json();\n setImages(data);\n } catch (err) {\n setError(\"Could not fetch images\");\n }\n };\n\n // Function to retrieve comments from the server\n const fetchComments = async () => {\n try {\n const response = await fetch('/comments');\n const data = await response.json();\n setComments(data);\n } catch (err) {\n setError(\"Could not fetch comments\");\n }\n };\n\n // Handle image upload process\n const handleUpload = async (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n const formData = new FormData();\n formData.append('image', file);\n\n try {\n const response = await fetch('/upload', {\n method: 'POST',\n body: formData\n });\n\n if (response.ok) {\n await fetchImages();\n setCanUpload(false);\n setTimeout(() => setCanUpload(true), 60000);\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Upload failed\");\n }\n } catch (err) {\n setError(\"Upload error\");\n }\n };\n\n // Handle adding a new comment\n const handleAddComment = async () => {\n if (!newComment.trim()) return;\n\n try {\n const response = await fetch('/add-comment', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ comment: newComment })\n });\n\n if (response.ok) {\n await fetchComments();\n setNewComment('');\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Comment upload failed\");\n }\n } catch (err) {\n setError(\"Comment upload error\");\n }\n };\n\n // Render the application UI\n return (\n

🖼️ One Image Per Minute 🕒

\n \n {/* Display error messages if any */}\n {error &&

{error}

}\n \n {/* File input for image upload */}\n \n \n {/* Show waiting message when upload is disabled */}\n {!canUpload &&

Wait 1 minute between uploads

}\n \n {/* Button to toggle comments */}\n \n\n {/* Comments section */}\n {showComments && (\n

\n {/* Comment input */}\n

\n setNewComment(e.target.value)}\n placeholder=\"Add a comment...\"\n style={{ \n flex: 1, \n padding: '5px', \n marginRight: '10px',\n borderRadius: '5px',\n border: '1px solid #ccc'\n }}\n />\n \n

\n\n {/* Comments list */}\n

\n {comments.map((comment, index) => (\n

\n {comment}\n

\n ))}\n

\n )}\n \n {/* Grid display for uploaded images */}\n

\n {/* Map and render each uploaded image */}\n {images.map((img, index) => (\n

\n ))}\n

\n );\n}\n\n// Client-side rendering function\nfunction client() {\n // Render React app in the root element\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Render client-side code only in browser environment\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side request handler\nexport default async function server(request: Request): Promise {\n // Dynamically import SQLite for server-side storage\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n \n // Generate a unique key based on the val's URL\n const KEY = \"imageUploadPerMinuteWebsite\";\n\n // Create images and comments tables if they don't exist\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_images (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n image_url TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_comments (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n comment TEXT NOT NULL,\n created_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n // Handle image upload endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/upload') {\n // Parse uploaded file from form data\n const formData = await request.formData();\n const image = formData.get('image') as File;\n\n // Validate image upload\n if (!image || !(image instanceof File)) {\n return new Response(JSON.stringify({ message: \"No image uploaded\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Check last upload time to enforce 1-minute limit\n const lastUpload = await sqlite.execute(`\n SELECT uploaded_at \n FROM ${KEY}_images \n ORDER BY uploaded_at DESC \n LIMIT 1\n `);\n\n // Determine if upload is allowed (first upload or > 1 minute since last)\n const canUpload = !lastUpload.rows.length || \n (Date.now() - new Date(lastUpload.rows[0].uploaded_at).getTime() > 60000);\n\n // Reject upload if time limit not met\n if (!canUpload) {\n return new Response(JSON.stringify({ message: \"Wait 1 minute between uploads\" }), { \n status: 429,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Convert image to base64 data URL for storage\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));\n const dataUrl = `data:${image.type};base64,${base64Image}`;\n\n // Store image URL in SQLite database\n await sqlite.execute(`\n INSERT INTO ${KEY}_images (image_url) VALUES (?)\n `, [dataUrl]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Upload successful\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle comment addition endpoint\n if (request.method === 'POST' && new URL(request.url).pathname === '/add-comment') {\n const body = await request.json();\n const comment = body.comment;\n\n // Validate comment\n if (!comment || comment.trim() === '') {\n return new Response(JSON.stringify({ message: \"Comment cannot be empty\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Store comment in SQLite database\n await sqlite.execute(`\n INSERT INTO ${KEY}_comments (comment) VALUES (?)\n `, [comment]);\n\n // Respond with success message\n return new Response(JSON.stringify({ message: \"Comment added successfully\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle images retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/images') {\n // Fetch 20 most recent images from database\n const images = await sqlite.execute(`\n SELECT image_url \n FROM ${KEY}_images \n ORDER BY uploaded_at DESC \n LIMIT 20\n `);\n\n // Return images as JSON\n return new Response(JSON.stringify(images.rows.map(row => row.image_url)), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Handle comments retrieval endpoint\n if (request.method === 'GET' && new URL(request.url).pathname === '/comments') {\n // Fetch 20 most recent comments from database\n const comments = await sqlite.execute(`\n SELECT comment \n FROM ${KEY}_comments \n ORDER BY created_at DESC \n LIMIT 20\n `);\n\n // Return comments as JSON\n return new Response(JSON.stringify(comments.rows.map(row => row.comment)), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n // Serve initial HTML page\n return new Response(`\n \n \n One Image Per Minute 🖼️\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",2,["D",1738404904572],{"_103":235,"_155":139,"_153":115,"_95":99,"_162":236,"_160":161,"_100":175,"_154":-5,"_105":237,"_156":232,"_165":-5},"998ba8b4-269c-11f0-9aab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Main React component for the image upload application\nfunction App() {\n // State variables to manage images, error messages, and upload restrictions\n const [images, setImages] = useState([]); // Stores uploaded images\n const [error, setError] = useState(null); // Stores error messages\n const [canUpload, setCanUpload] = useState(true); // Controls upload ability\n\n // Fetch images when the component first loads\n useEffect(() => {\n fetchImages();\n }, []);\n\n // Function to retrieve images from the server\n const fetchImages = async () => {\n try {\n // Send GET request to /images endpoint\n const response = await fetch('/images');\n const data = await response.json();\n // Update images state with retrieved images\n setImages(data);\n } catch (err) {\n // Set error message if image fetching fails\n setError(\"Could not fetch images\");\n }\n };\n\n // Handle image upload process\n const handleUpload = async (event) => {\n // Get the first file from the file input\n const file = event.target.files[0];\n if (!file) return;\n\n // Create FormData to send file to server\n const formData = new FormData();\n formData.append('image', file);\n\n try {\n // Send POST request to /upload endpoint\n const response = await fetch('/upload', {\n method: 'POST',\n body: formData\n });\n\n if (response.ok) {\n // If upload is successful:\n // 1. Refresh images list\n await fetchImages();\n // 2. Disable upload for 1 minute\n setCanUpload(false);\n // 3. Re-enable upload after 1 minute\n setTimeout(() => setCanUpload(true), 60000);\n } else {\n // Handle upload errors\n const errorData = await response.json();\n setError(errorData.message || \"Upload failed\");\n }\n } catch (err) {\n // Catch any network or unexpected errors\n setError(\"Upload error\");\n }\n };\n\n // Render the application UI\n return (\n

🖼️ One Image Per Minute 🕒

\n \n {/* Display error messages if any */}\n {error &&

{error}

}\n \n {/* File input for image upload */}\n \n \n {/* Show waiting message when upload is disabled */}\n {!canUpload &&

Wait 1 minute between uploads

}\n \n {/* Grid display for uploaded images */}\n

\n {/* Map and render each uploaded image */}\n {images.map((img, index) => (\n

\n ))}\n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",["D",1738404801544],{"_103":239,"_155":139,"_153":115,"_95":99,"_162":240,"_160":161,"_100":32,"_154":-5,"_105":241,"_156":175,"_165":-5},"9987dd2e-269c-11f0-9aab-569c3dd06744","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction App() {\n const [images, setImages] = useState([]);\n const [error, setError] = useState(null);\n const [canUpload, setCanUpload] = useState(true);\n\n useEffect(() => {\n fetchImages();\n }, []);\n\n const fetchImages = async () => {\n try {\n const response = await fetch('/images');\n const data = await response.json();\n setImages(data);\n } catch (err) {\n setError(\"Could not fetch images\");\n }\n };\n\n const handleUpload = async (event) => {\n const file = event.target.files[0];\n if (!file) return;\n\n const formData = new FormData();\n formData.append('image', file);\n\n try {\n const response = await fetch('/upload', {\n method: 'POST',\n body: formData\n });\n\n if (response.ok) {\n await fetchImages();\n setCanUpload(false);\n setTimeout(() => setCanUpload(true), 60000); // 1 minute\n } else {\n const errorData = await response.json();\n setError(errorData.message || \"Upload failed\");\n }\n } catch (err) {\n setError(\"Upload error\");\n }\n };\n\n return (\n

🖼️ One Image Per Minute 🕒

\n {error &&

{error}

}\n \n {!canUpload &&

Wait 1 minute between uploads

}\n

\n {images.map((img, index) => (\n

\n ))}\n

\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 { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"imageUploadPerMinuteWebsite\";\n\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_images (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n image_url TEXT NOT NULL,\n uploaded_at DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/upload') {\n const formData = await request.formData();\n const image = formData.get('image') as File;\n\n if (!image || !(image instanceof File)) {\n return new Response(JSON.stringify({ message: \"No image uploaded\" }), { \n status: 400,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n const lastUpload = await sqlite.execute(`\n SELECT uploaded_at \n FROM ${KEY}_images \n ORDER BY uploaded_at DESC \n LIMIT 1\n `);\n\n const canUpload = !lastUpload.rows.length || \n (Date.now() - new Date(lastUpload.rows[0].uploaded_at).getTime() > 60000);\n\n if (!canUpload) {\n return new Response(JSON.stringify({ message: \"Wait 1 minute between uploads\" }), { \n status: 429,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n const arrayBuffer = await image.arrayBuffer();\n const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));\n const dataUrl = `data:${image.type};base64,${base64Image}`;\n\n await sqlite.execute(`\n INSERT INTO ${KEY}_images (image_url) VALUES (?)\n `, [dataUrl]);\n\n return new Response(JSON.stringify({ message: \"Upload successful\" }), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n if (request.method === 'GET' && new URL(request.url).pathname === '/images') {\n const images = await sqlite.execute(`\n SELECT image_url \n FROM ${KEY}_images \n ORDER BY uploaded_at DESC \n LIMIT 20\n `);\n\n return new Response(JSON.stringify(images.rows.map(row => row.image_url)), { \n headers: { 'Content-Type': 'application/json' }\n });\n }\n\n return new Response(`\n \n \n One Image Per Minute\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}",["D",1738404765885],"versions",[244,246,247,248,249,250,251,252,253],{"_180":202,"_245":204},"previous",{"_180":204,"_245":209},{"_180":209,"_245":214},{"_180":214,"_245":219},{"_180":219,"_245":224},{"_180":224,"_245":229},{"_180":229,"_245":234},{"_180":234,"_245":238},{"_180":238,"_245":-5},"versionNumber","page","hasNext","actionData","errors"]

History for main.tsx