/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useCallback } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Main React component for the image upload application function App() { // State variables to manage images, error messages, upload restrictions, and comments const [images, setImages] = useState([]); // Stores uploaded images const [error, setError] = useState(null); // Stores error messages const [canUpload, setCanUpload] = useState(true); // Controls upload ability const [showComments, setShowComments] = useState(false); // Controls comment visibility const [comments, setComments] = useState([]); // Stores comments for images const [newComment, setNewComment] = useState(''); // Stores new comment input const [username, setUsername] = useState(''); // Stores username const [isUsernameSet, setIsUsernameSet] = useState(false); // Tracks if username is set // Bulk upload states const [selectedFiles, setSelectedFiles] = useState([]); // Selected files for bulk upload const [uploadProgress, setUploadProgress] = useState(0); // Upload progress const [isUploading, setIsUploading] = useState(false); // Upload in progress flag const [currentPage, setCurrentPage] = useState(1); // Current page of images const [totalPages, setTotalPages] = useState(0); // Total pages of images // Load username from localStorage on component mount useEffect(() => { const storedUsername = localStorage.getItem('imageAppUsername'); if (storedUsername) { setUsername(storedUsername); setIsUsernameSet(true); } }, []); // Fetch images and comments when the component first loads or page changes useEffect(() => { fetchImages(); fetchComments(); }, [currentPage]); // Function to retrieve images from the server with pagination const fetchImages = async () => { try { const response = await fetch(`/images?page=${currentPage}`); const data = await response.json(); setImages(data.images); setTotalPages(data.totalPages); } catch (err) { setError("Could not fetch images"); console.error("Image fetch error:", err); } }; // Function to retrieve comments from the server const fetchComments = async () => { try { const response = await fetch('/comments'); const data = await response.json(); setComments(data); } catch (err) { setError("Could not fetch comments"); console.error("Comments fetch error:", err); } }; // Handle bulk file selection const handleFileSelect = (event) => { const files = Array.from(event.target.files); // Limit to 10,000 files if (files.length > 10000) { setError("Cannot upload more than 10,000 files at once"); return; } // Validate file types and sizes const validFiles = files.filter(file => file.type.startsWith('image/') && file.size <= 5 * 1024 * 1024 // 5MB max file size ); if (validFiles.length !== files.length) { setError("Some files were excluded due to invalid type or size"); } setSelectedFiles(validFiles); }; // Bulk upload function const handleBulkUpload = async () => { if (!isUsernameSet) { setError("Please set a username first"); return; } if (selectedFiles.length === 0) { setError("No files selected"); return; } setIsUploading(true); setUploadProgress(0); try { // Upload files in batches to prevent server overload const batchSize = 50; for (let i = 0; i < selectedFiles.length; i += batchSize) { const batch = selectedFiles.slice(i, i + batchSize); const uploadPromises = batch.map(async (file) => { const formData = new FormData(); formData.append('image', file); formData.append('username', username); const response = await fetch('/upload', { method: 'POST', body: formData }); if (!response.ok) { throw new Error(`Upload failed for ${file.name}`); } }); await Promise.all(uploadPromises); // Update progress setUploadProgress(Math.floor(((i + batchSize) / selectedFiles.length) * 100)); } // Refresh images after upload await fetchImages(); // Reset upload states setSelectedFiles([]); setIsUploading(false); setUploadProgress(0); setError(null); } catch (err) { console.error("Bulk upload error:", err); setError("Bulk upload failed: " + err.message); setIsUploading(false); } }; // Pagination handlers const handleNextPage = () => { if (currentPage < totalPages) { setCurrentPage(prev => prev + 1); } }; const handlePrevPage = () => { if (currentPage > 1) { setCurrentPage(prev => prev - 1); } }; // Rest of the existing component code remains the same... return (

🖼️ Bulk Image Uploader 📸

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

{selectedFiles.length > 0 && (

Selected Files: {selectedFiles.length}

)} {isUploading && (

Uploading: {uploadProgress}%

)}

{/* Pagination Controls */}

Page {currentPage} of {totalPages}

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

); } // Server-side modifications in handler functions async function handleUpload(request, sqlite, KEY, TABLE_VERSION) { const formData = await request.formData(); const image = formData.get('image') as File; const username = formData.get('username') as string; if (!image || !(image instanceof File)) { return new Response(JSON.stringify({ message: "No image uploaded" }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } const arrayBuffer = await image.arrayBuffer(); const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer))); const dataUrl = `data:${image.type};base64,${base64Image}`; await sqlite.execute(` INSERT INTO ${KEY}_images_${TABLE_VERSION} (image_url, username) VALUES (?, ?) `, [dataUrl, username]); return new Response(JSON.stringify({ message: "Upload successful" }), { headers: { 'Content-Type': 'application/json' } }); } async function handleGetImages(sqlite, KEY, TABLE_VERSION, page = 1, pageSize = 100) { const offset = (page - 1) * pageSize; // Get total number of images const totalCountResult = await sqlite.execute(` SELECT COUNT(*) as total FROM ${KEY}_images_${TABLE_VERSION} `); const totalImages = totalCountResult.rows[0].total; const totalPages = Math.ceil(totalImages / pageSize); // Get paginated images const images = await sqlite.execute(` SELECT id, image_url, username FROM ${KEY}_images_${TABLE_VERSION} ORDER BY uploaded_at DESC LIMIT ? OFFSET ? `, [pageSize, offset]); return new Response(JSON.stringify({ images: images.rows, totalPages: totalPages, currentPage: page }), { headers: { 'Content-Type': 'application/json' } }); } // Modify the server switch statement to pass page parameter case '/images': if (request.method !== 'GET') break; const url = new URL(request.url); const page = parseInt(url.searchParams.get('page') || '1', 10); return await handleGetImages(sqlite, KEY, TABLE_VERSION, page);

Chishti78studi