🖼️ 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",[],[152],"files",[150],"counts",{"_173":32,"_174":175,"_176":32,"_177":178},"pulls","branches",1,"forks","envVars",{"_179":32,"_180":32},"count","emptyCount","contents",[183],{"_102":151,"_95":152,"_153":114,"_154":-5,"_155":138,"_156":137,"_157":116,"_104":184,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":185},["D",1738405520135],[152],"file","upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name._index",{"_93":94,"_95":96,"_97":-7,"_99":-7,"_100":195,"_181":200,"_203":-7,"_204":-5,"_205":-5,"_169":206,"_210":211,"_212":-5,"_213":-5},{"_102":103,"_95":96,"_104":196,"_106":-5,"_107":22,"_108":109,"_110":-5,"_111":-5,"_14":112,"_113":114,"_115":116,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":197,"_132":198,"_135":199,"_147":22},["D",1746111448090],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_99":137,"_95":43,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[201],{"_102":151,"_95":152,"_153":114,"_154":-5,"_155":138,"_156":137,"_157":116,"_104":184,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_98":202},[152],"readme","upstream","pull",[207],{"_102":151,"_95":152,"_153":114,"_154":-5,"_155":138,"_156":137,"_157":116,"_104":158,"_99":159,"_160":161,"_162":163,"_164":22,"_165":-5,"_166":208,"_98":209},[],[152],"previews",[207],"ahead","behind","actionData","errors"]

Chishti78studi

imageUploadPerMinuteWebsite