🖼️ 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",[98],"permalink","https://www.val.town/x/Chishti78studi/imageUploadPerMinuteWebsite/code/main.tsx","extension","actionData","errors"]