No images uploaded yet

';\n }\n } else {\n throw new Error(result.message || 'Error loading images');\n }\n } catch (error) {\n console.error('Error loading images:', error);\n uploadStatusElement.textContent = `Error: ${error.message}`;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n throw error; // Re-throw to see the full error\n }\n }\n \n // Render images using Uploadcare's File Uploader UI\n function renderUploadcareGallery(images) {\n console.log('Rendering Uploadcare gallery with images:', images);\n \n // Get the container element\n const galleryContainer = document.getElementById('uploadcare-gallery');\n \n if (!galleryContainer) {\n console.error('ERROR: Gallery container element not found!');\n return;\n }\n \n // Clear the container\n galleryContainer.innerHTML = '';\n \n // Create a container for the File Uploader UI\n const fileUploaderContainer = document.createElement('div');\n fileUploaderContainer.className = 'uploadcare--file-uploader-ui';\n galleryContainer.appendChild(fileUploaderContainer);\n \n // Create the file list\n const fileList = document.createElement('div');\n fileList.className = 'uploadcare--file-list';\n fileUploaderContainer.appendChild(fileList);\n \n // Add each image to the file list\n images.forEach(image => {\n // Create the file item\n const fileItem = document.createElement('div');\n fileItem.className = 'uploadcare--file';\n fileItem.dataset.fileId = image.id;\n \n // Create the file info\n const fileInfo = document.createElement('div');\n fileInfo.className = 'uploadcare--file__info';\n \n // Create the file preview\n const filePreview = document.createElement('div');\n filePreview.className = 'uploadcare--file__preview';\n const previewImg = document.createElement('img');\n previewImg.src = `${image.cdnUrl}-/preview/76x76/-/setfill/ffffff/-/format/jpeg/-/progressive/yes/`;\n previewImg.alt = 'Preview';\n filePreview.appendChild(previewImg);\n \n // Create the file name\n const fileName = document.createElement('div');\n fileName.className = 'uploadcare--file__name';\n fileName.textContent = image.originalName || image.id;\n \n // Create the file size\n const fileSize = document.createElement('div');\n fileSize.className = 'uploadcare--file__size';\n fileSize.textContent = image.size ? formatFileSize(image.size) : 'Uploaded';\n \n // Create the file actions\n const fileActions = document.createElement('div');\n fileActions.className = 'uploadcare--file__actions';\n \n // Create the view button\n const viewButton = document.createElement('button');\n viewButton.className = 'uploadcare--button uploadcare--button_icon uploadcare--button_muted';\n viewButton.type = 'button';\n viewButton.title = 'View image';\n viewButton.innerHTML = '';\n viewButton.addEventListener('click', () => {\n window.open(image.cdnUrl, '_blank');\n });\n \n // Create the remove button\n const removeButton = document.createElement('button');\n removeButton.className = 'uploadcare--button uploadcare--button_icon uploadcare--button_muted uploadcare--file__remove';\n removeButton.type = 'button';\n removeButton.title = 'Delete image';\n removeButton.innerHTML = '';\n removeButton.addEventListener('click', () => {\n if (confirm('Are you sure you want to delete this image?')) {\n deleteImage(image.id);\n }\n });\n \n // Assemble the file item\n fileActions.appendChild(viewButton);\n fileActions.appendChild(removeButton);\n fileInfo.appendChild(filePreview);\n fileInfo.appendChild(fileName);\n fileInfo.appendChild(fileSize);\n fileItem.appendChild(fileInfo);\n fileItem.appendChild(fileActions);\n fileList.appendChild(fileItem);\n });\n \n // Add SVG icons for Uploadcare UI\n if (!document.getElementById('uploadcare--icons')) {\n const icons = document.createElement('div');\n icons.id = 'uploadcare--icons';\n icons.style.display = 'none';\n icons.innerHTML = `\n \n `;\n document.body.appendChild(icons);\n }\n }\n \n // Delete an image using Uploadcare's API\n async function deleteImage(imageId) {\n try {\n console.log(`Deleting image: ${imageId}`);\n \n // Show loading state in the gallery\n const galleryContainer = document.getElementById('uploadcare-gallery');\n if (galleryContainer) {\n galleryContainer.style.opacity = '0.7';\n }\n \n const response = await fetch('/image', {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n imageId,\n submissionId\n })\n });\n \n console.log(`Delete response status: ${response.status} ${response.statusText}`);\n \n let result;\n try {\n result = await response.json();\n console.log('Delete response:', result);\n } catch (parseError) {\n console.error('Error parsing delete response:', parseError);\n const errorText = await response.text();\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n // Refresh the gallery after deletion\n loadImages();\n } else {\n // Check for database schema errors\n const errorMessage = result.message || 'Failed to delete image';\n console.error('Delete error:', errorMessage);\n \n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n \n alert(`Database schema error. Please refresh the page and try again.`);\n \n } else {\n alert(errorMessage);\n }\n }\n } catch (error) {\n console.error('Error deleting image:', error);\n alert(`An error occurred while deleting the image: ${error.message}`);\n } finally {\n // Reset gallery opacity\n const galleryContainer = document.getElementById('uploadcare-gallery');\n if (galleryContainer) {\n galleryContainer.style.opacity = '1';\n }\n }\n }\n \n // Handle form submission\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n \n // Disable the submit button and show loading state\n submitButton.disabled = true;\n submitButton.innerText = 'Saving...';\n \n // Hide any previous messages\n successMessage.classList.add('hidden');\n errorMessage.classList.add('hidden');\n \n try {\n const formData = new FormData(form);\n const formDataObj = {};\n \n // Convert FormData to object\n for (const [key, value] of formData.entries()) {\n if (key !== 'submissionId' && value) {\n formDataObj[key] = value;\n }\n }\n \n // Add the ID to the form data\n formDataObj.id = submissionId;\n \n // Include the Uploadcare file ID if available\n const uploadcareWidget = uploadcare.Widget('#uploadcareFile');\n const file = uploadcareWidget.value();\n \n if (file) {\n try {\n // Get the UUID from the file\n file.done(fileInfo => {\n if (fileInfo && fileInfo.uuid) {\n formDataObj.uploadcareUuid = fileInfo.uuid;\n console.log(`Added file ID to form data: ${fileInfo.uuid}`);\n }\n });\n } catch (e) {\n console.error('Error getting file UUID:', e);\n }\n }\n \n const response = await fetch(`/update`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(formDataObj)\n });\n \n const result = await response.json();\n \n if (response.ok && result.success) {\n // Show success message\n successMessage.classList.remove('hidden');\n \n // Scroll to success message\n successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });\n \n // Hide success message after 3 seconds\n setTimeout(() => {\n successMessage.classList.add('hidden');\n }, 3000);\n } else {\n // Show error message\n errorMessage.textContent = result.message || 'An error occurred. Please try again.';\n errorMessage.classList.remove('hidden');\n }\n } catch (error) {\n console.error('Error submitting form:', error);\n errorMessage.textContent = 'An error occurred. Please try again.';\n errorMessage.classList.remove('hidden');\n } finally {\n // Re-enable the submit button\n submitButton.disabled = false;\n submitButton.innerText = 'Save Information';\n }\n });\n \n // Format file size in human-readable format\n function formatFileSize(bytes) {\n if (bytes === 0) return '0 Bytes';\n \n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n \n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n }\n \n // Initialize\n initUploadcare();\n});",[],[257,280,286],{"_106":295,"_99":296,"_150":297,"_152":281,"_153":139,"_154":138,"_156":120,"_108":298,"_103":299,"_158":171,"_160":300,"_161":27,"_162":-5,"_163":301,"_102":302},"9ddf5dce-2b70-11f0-a8d1-569c3dd06744","landing.js","76e98f00-2adf-11f0-ad9d-569c3dd06744",["D",1746642313332],3,"document.addEventListener('DOMContentLoaded', () => {\n // Main submission form\n const form = document.getElementById('submissionForm');\n const submitButton = document.getElementById('submitButton');\n const successMessage = document.getElementById('successMessage');\n const errorMessage = document.getElementById('errorMessage');\n \n // Magic link form\n const magicLinkForm = document.getElementById('magicLinkForm');\n const magicLinkButton = document.getElementById('magicLinkButton');\n const magicLinkSuccessMessage = document.getElementById('magicLinkSuccessMessage');\n const magicLinkErrorMessage = document.getElementById('magicLinkErrorMessage');\n \n // Handle main form submission\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n \n // Disable the submit button and show loading state\n submitButton.disabled = true;\n submitButton.innerText = 'Submitting...';\n \n // Hide any previous messages\n successMessage.classList.add('hidden');\n errorMessage.classList.add('hidden');\n \n try {\n const formData = new FormData(form);\n \n const response = await fetch('/submit', {\n method: 'POST',\n body: formData\n });\n \n const result = await response.json();\n \n if (response.ok && result.success) {\n // Show success message with the message from the server\n form.reset();\n \n // Update success message content with server response\n const messageContent = successMessage.querySelector('p:first-of-type');\n if (messageContent) {\n messageContent.textContent = result.message || 'Thank you for your submission!';\n }\n \n successMessage.classList.remove('hidden');\n \n // Scroll to the success message\n successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });\n } else {\n // Show error message\n errorMessage.textContent = result.message || 'An error occurred. Please try again.';\n errorMessage.classList.remove('hidden');\n }\n } catch (error) {\n console.error('Error submitting form:', error);\n errorMessage.textContent = 'An error occurred. Please try again.';\n errorMessage.classList.remove('hidden');\n } finally {\n // Re-enable the submit button\n submitButton.disabled = false;\n submitButton.innerText = 'Submit';\n }\n });\n \n // Handle magic link form submission\n magicLinkForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n \n // Disable the button and show loading state\n magicLinkButton.disabled = true;\n magicLinkButton.innerText = 'Sending...';\n \n // Hide any previous messages\n magicLinkSuccessMessage.classList.add('hidden');\n magicLinkErrorMessage.classList.add('hidden');\n \n try {\n const email = document.getElementById('existingEmail').value;\n \n const response = await fetch('/request-magic-link', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ email })\n });\n \n const result = await response.json();\n \n // Always show success message even if email doesn't exist (for security)\n magicLinkForm.reset();\n \n // Update success message with server response\n if (result && result.message) {\n magicLinkSuccessMessage.textContent = result.message;\n }\n \n magicLinkSuccessMessage.classList.remove('hidden');\n \n } catch (error) {\n console.error('Error requesting magic link:', error);\n magicLinkErrorMessage.textContent = 'An error occurred. Please try again.';\n magicLinkErrorMessage.classList.remove('hidden');\n } finally {\n // Re-enable the button\n magicLinkButton.disabled = false;\n magicLinkButton.innerText = 'Send Magic Link';\n }\n });\n});",[],[257,280,296],{"_106":304,"_99":305,"_150":306,"_152":281,"_153":139,"_154":307,"_156":120,"_108":308,"_103":33,"_158":171,"_160":309,"_161":27,"_162":-5,"_163":310,"_102":311},"0352f3f6-2b6b-11f0-8d5e-569c3dd06744","uploadcare-helper.js","0352f4aa-2b6b-11f0-8d5e-569c3dd06744",202,["D",1746639906566],"/**\n * Uploadcare Helper Functions\n * \n * This file contains helper functions for working with Uploadcare\n * in a way that avoids group creation issues.\n */\n\n/**\n * Initialize single file uploaders\n * @param {Array} uploaderIds - Array of uploader element IDs\n * @param {Function} onFileUploaded - Callback function when a file is uploaded\n */\nfunction initSingleFileUploaders(uploaderIds, onFileUploaded) {\n if (typeof uploadcare === 'undefined') {\n console.error('ERROR: Uploadcare library is not loaded!');\n return;\n }\n \n uploaderIds.forEach(id => {\n const widget = uploadcare.Widget(`#${id}`);\n \n widget.onChange(function(file) {\n if (!file) return;\n \n // Handle file upload\n file.progress(info => {\n console.log(`Upload progress for ${id}:`, Math.round(info.progress * 100) + '%');\n });\n \n file.done(fileInfo => {\n console.log(`Upload completed for ${id}:`, fileInfo);\n \n // Call the callback with the file info\n if (typeof onFileUploaded === 'function') {\n onFileUploaded(fileInfo);\n }\n });\n \n file.fail(error => {\n console.error(`Upload failed for ${id}:`, error);\n });\n });\n });\n}\n\n/**\n * Get all uploaded file UUIDs from multiple single uploaders\n * @param {Array} uploaderIds - Array of uploader element IDs\n * @returns {Promise} - Promise resolving to array of file UUIDs\n */\nfunction getUploadedFileUUIDs(uploaderIds) {\n return new Promise((resolve) => {\n const fileUUIDs = [];\n let processedCount = 0;\n \n // If no uploaders, resolve with empty array\n if (!uploaderIds || uploaderIds.length === 0) {\n resolve([]);\n return;\n }\n \n uploaderIds.forEach(id => {\n const widget = uploadcare.Widget(`#${id}`);\n const file = widget.value();\n \n if (file) {\n file.done(fileInfo => {\n if (fileInfo && fileInfo.uuid) {\n fileUUIDs.push(fileInfo.uuid);\n }\n \n processedCount++;\n if (processedCount === uploaderIds.length) {\n resolve(fileUUIDs);\n }\n }).fail(() => {\n processedCount++;\n if (processedCount === uploaderIds.length) {\n resolve(fileUUIDs);\n }\n });\n } else {\n processedCount++;\n if (processedCount === uploaderIds.length) {\n resolve(fileUUIDs);\n }\n }\n });\n });\n}\n\n/**\n * Clear all single file uploaders\n * @param {Array} uploaderIds - Array of uploader element IDs\n */\nfunction clearUploaders(uploaderIds) {\n uploaderIds.forEach(id => {\n const widget = uploadcare.Widget(`#${id}`);\n widget.value(null);\n });\n}\n\n/**\n * Create a preview gallery from individual file UUIDs\n * @param {Array} fileUUIDs - Array of Uploadcare file UUIDs\n * @param {string} containerId - ID of container element for the gallery\n * @param {Function} onDelete - Optional callback when delete button is clicked\n */\nfunction createFileGallery(fileUUIDs, containerId, onDelete) {\n const container = document.getElementById(containerId);\n if (!container) return;\n \n // Clear the container\n container.innerHTML = '';\n \n if (!fileUUIDs || fileUUIDs.length === 0) {\n container.innerHTML = '

No images uploaded yet

';\n return;\n }\n \n // Create gallery grid\n const gallery = document.createElement('div');\n gallery.className = 'grid grid-cols-2 md:grid-cols-4 gap-4';\n container.appendChild(gallery);\n \n // Add each image to the gallery\n fileUUIDs.forEach(uuid => {\n const cdnUrl = `https://ucarecdn.com/${uuid}/`;\n \n const item = document.createElement('div');\n item.className = 'relative bg-white rounded-lg shadow-sm overflow-hidden';\n item.dataset.uuid = uuid;\n \n // Image preview\n const img = document.createElement('img');\n img.src = `${cdnUrl}-/preview/300x300/-/format/auto/-/quality/smart/`;\n img.alt = 'Image preview';\n img.className = 'w-full h-32 object-cover';\n \n // Image actions\n const actions = document.createElement('div');\n actions.className = 'p-2 flex justify-between items-center';\n \n // View button\n const viewBtn = document.createElement('a');\n viewBtn.href = cdnUrl;\n viewBtn.target = '_blank';\n viewBtn.className = 'text-blue-500 hover:text-blue-700 text-sm';\n viewBtn.textContent = 'View';\n \n // Delete button\n const deleteBtn = document.createElement('button');\n deleteBtn.type = 'button';\n deleteBtn.className = 'text-red-500 hover:text-red-700 text-sm';\n deleteBtn.textContent = 'Delete';\n deleteBtn.onclick = () => {\n if (typeof onDelete === 'function') {\n onDelete(uuid, item);\n }\n };\n \n // Assemble the item\n actions.appendChild(viewBtn);\n actions.appendChild(deleteBtn);\n item.appendChild(img);\n item.appendChild(actions);\n gallery.appendChild(item);\n });\n}",[],[257,280,305],[257,280],{"_106":314,"_99":315,"_150":316,"_152":258,"_153":139,"_154":122,"_156":120,"_108":317,"_103":181,"_158":318,"_160":319,"_161":27,"_162":-5,"_163":320,"_102":321},"fcd5af1e-2b6f-11f0-92e5-569c3dd06744","single-file-demo.ts","fa0e99b2-2b6f-11f0-a4d1-569c3dd06744",["D",1746642043162],"http","export default function handler(req: Request): Response {\n const html = `\n\n\n \n \n Uploadcare Single File Demo\n \n \n \n \n \n \n \n \n \n \n\n\n

Uploadcare Single File Demo

Solution 1: Using individual file uploaders to avoid group issues

\n \n \n

Upload Images

\n \n

\n This demo uses multiple single file uploaders instead of one multi-file uploader.\n Each uploader will give you an individual file UUID, avoiding the group issue.\n

\n \n

\n Image 1\n \n

\n \n

\n Image 2\n \n

\n \n \n

Results

\n \n

Upload images to see results...

\n \n

Implementation Code

\n \n

// HTML\n<input \n  type=\"hidden\" \n  role=\"uploadcare-uploader\"\n  data-images-only=\"true\"\n  data-multiple=\"false\"\n  id=\"singleUploader1\"\n/>\n\n// JavaScript\nconst widget = uploadcare.Widget('#singleUploader1');\n\nwidget.onChange(function(file) {\n  if (file) {\n    file.done(function(fileInfo) {\n      console.log('File UUID:', fileInfo.uuid);\n      console.log('CDN URL:', fileInfo.cdnUrl);\n      \n      // This is always an individual file, never a group\n      saveImageToDatabase(fileInfo.uuid);\n    });\n  }\n});

\n \n \n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}",[],[257,315],{"_106":323,"_99":324,"_150":325,"_152":258,"_153":139,"_154":326,"_156":120,"_108":327,"_103":181,"_158":318,"_160":328,"_161":27,"_162":-5,"_163":329,"_102":330},"de9d5d1c-2b6f-11f0-a272-569c3dd06744","uploadcare-demo.ts","dbfe6286-2b6f-11f0-938f-569c3dd06744",217,["D",1746641992456],"export default function handler(req: Request): Response {\n const html = `\n\n\n \n \n Uploadcare Individual Files Demo\n \n \n \n\n\n

Uploadcare Individual Files Demo

\n \n

Upload Images

\n \n

Problem: Group Uploads

\n When using the default multi-file widget, Uploadcare creates a \"group\" with a UUID like \n cb08730c-9c8b-46bb-a79e-9ab0f228939e~1.\n This can cause issues when you need to work with individual files.\n

\n \n

\n Multi-file upload (creates groups):\n \n

\n \n

Solution 1: Individual File Uploads

\n Use separate widgets for each file upload to get individual file UUIDs.\n

\n \n

\n Image 1:\n \n

\n Image 2:\n \n

\n Image 3:\n \n

\n \n

Solution 2: Process Group Files Individually

\n If you need to use the multi-file uploader, you can extract individual files from the group.\n

\n \n

\n Multi-file upload (with individual file handling):\n \n

\n \n

Results

\n \n

Group Upload Result

Upload files to see results...

\n \n

Individual Files Result

Upload files to see results...

\n \n

Smart Group Handling Result

Upload files to see results...

\n \n

\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}",[],[257,324],{"_106":332,"_99":333,"_150":334,"_152":258,"_153":139,"_154":335,"_156":120,"_108":336,"_103":181,"_158":318,"_160":337,"_161":27,"_162":-5,"_163":338,"_102":339},"bd844726-2b6f-11f0-b084-569c3dd06744","uploadcare-fix.ts","bb2a4192-2b6f-11f0-a30d-569c3dd06744",214,["D",1746641936924],"export default function handler(req: Request): Response {\n const html = `\n\n\n \n \n Uploadcare Group Fix\n \n \n \n\n\n

Uploadcare Group Fix

A solution for handling Uploadcare group uploads properly

\n \n

The Problem

\n \n

\n When using Uploadcare's multi-file uploader, files are grouped together with a UUID like:\n cb08730c-9c8b-46bb-a79e-9ab0f228939e~1\n

\n \n

\n To access individual files, you need to use the /nth/0/ syntax,\n which can be cumbersome and doesn't give you direct access to individual file UUIDs.\n

\n \n

Solution 1: Single File Uploads

\n \n

\n Use individual file uploaders to get separate file UUIDs:\n

\n \n

Upload a file to see the result...

\n \n

Solution 2: Extract from Group

\n \n

\n Use the multi-file uploader but extract individual file UUIDs:\n

\n \n

Upload files to see the result...

\n \n

Extracted Files

\n \n

Upload files using Solution 2 to see extracted files...

\n \n

Implementation Guide

\n \n

JavaScript Code

\n \n

// Extract individual files from a group\nuploadcareWidget.onChange(function(file) {\n  if (file) {\n    file.done(function(fileInfo) {\n      if (fileInfo.isGroup) {\n        // Load the group info to get individual files\n        fileInfo.files().done(function(files) {\n          files.forEach(file => {\n            console.log('Individual file UUID:', file.uuid);\n            console.log('Individual file URL:', file.cdnUrl);\n            \n            // Use these individual files instead of the group\n            saveImageToDatabase(file.uuid);\n          });\n        });\n      } else {\n        // Handle single file upload\n        console.log('Single file UUID:', fileInfo.uuid);\n        saveImageToDatabase(fileInfo.uuid);\n      }\n    });\n  }\n});

\n \n

Backend API Example

\n \n

// Register individual files instead of groups\napp.post(\"/register-image\", async (c) => {\n  const { uploadcareUuid, submissionId } = await c.req.json();\n  \n  // Check if this is a group UUID (contains ~)\n  if (uploadcareUuid.includes('~')) {\n    // Get group info and extract individual files\n    const groupInfo = await getGroupInfo(uploadcareUuid);\n    \n    // Register each file individually\n    const registeredFiles = [];\n    for (const file of groupInfo.files) {\n      const result = await registerSingleFile(file.uuid, submissionId);\n      registeredFiles.push(result);\n    }\n    \n    return c.json({ success: true, files: registeredFiles });\n  } else {\n    // Register single file\n    const result = await registerSingleFile(uploadcareUuid, submissionId);\n    return c.json({ success: true, file: result });\n  }\n});

\n\n \n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n}",[],[257,333],[257],{"_106":342,"_99":343,"_150":344,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":345,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":346,"_102":393},"76e9e766-2adf-11f0-ad9d-569c3dd06744","services","ed368a55-a55d-4883-a46c-b3a7d7aa58c6",["D",1746579970933],[347,356,364,374,383],{"_106":348,"_99":349,"_150":350,"_152":344,"_153":139,"_154":351,"_156":120,"_108":352,"_103":181,"_158":171,"_160":353,"_161":27,"_162":-5,"_163":354,"_102":355},"16f9048c-2ae3-11f0-b62d-569c3dd06744","databaseService.ts","76e99356-2adf-11f0-ad9d-569c3dd06744",75,["D",1746581527976],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Submission, UpdateSubmissionDto } from \"../models/submission.ts\";\n\n// Table name - change this when modifying schema\nconst SUBMISSIONS_TABLE = 'laura_mepson_submissions_v1';\n\n/**\n * Set up the database tables\n */\nexport async function setupDatabase(): Promise {\n try {\n // Create submissions table\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${SUBMISSIONS_TABLE} (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n )`);\n \n console.log(\"Database setup complete\");\n } catch (error) {\n console.error(\"Error setting up database:\", error);\n throw error;\n }\n}\n\n/**\n * Save a new submission\n */\nexport async function saveSubmission(id: string, companyName: string, email: string): Promise> {\n try {\n const createdAt = new Date().toISOString();\n \n await sqlite.execute(\n `INSERT INTO ${SUBMISSIONS_TABLE} (id, company_name, email, created_at, additional_fields)\n VALUES (?, ?, ?, ?, ?)`,\n [id, companyName, email, createdAt, \"{}\"]\n );\n \n return { id, companyName, email, createdAt };\n } catch (error) {\n console.error(\"Error saving submission:\", error);\n throw error;\n }\n}\n\n/**\n * Get a submission by ID\n */\nexport async function getSubmission(id: string): Promise {\n try {\n const result = await sqlite.execute(\n `SELECT id, company_name, email, created_at, additional_fields \n FROM ${SUBMISSIONS_TABLE} \n WHERE id = ?`,\n [id]\n );\n \n if (result.rows.length === 0) {\n return null;\n }\n \n const row = result.rows[0];\n let additionalFields = {};\n \n try {\n additionalFields = JSON.parse(row.additional_fields || \"{}\");\n } catch (e) {\n console.error(\"Error parsing additional fields:\", e);\n }\n \n return {\n id: row.id,\n companyName: row.company_name,\n email: row.email,\n createdAt: row.created_at,\n additionalFields\n };\n } catch (error) {\n console.error(\"Error getting submission:\", error);\n throw error;\n }\n}\n\n/**\n * Find a submission by email\n */\nexport async function findSubmissionByEmail(email: string): Promise {\n try {\n const result = await sqlite.execute(\n `SELECT id, company_name, email, created_at, additional_fields \n FROM ${SUBMISSIONS_TABLE} \n WHERE email = ?\n ORDER BY created_at DESC\n LIMIT 1`,\n [email]\n );\n \n if (result.rows.length === 0) {\n return null;\n }\n \n const row = result.rows[0];\n let additionalFields = {};\n \n try {\n additionalFields = JSON.parse(row.additional_fields || \"{}\");\n } catch (e) {\n console.error(\"Error parsing additional fields:\", e);\n }\n \n return {\n id: row.id,\n companyName: row.company_name,\n email: row.email,\n createdAt: row.created_at,\n additionalFields\n };\n } catch (error) {\n console.error(\"Error finding submission by email:\", error);\n return null;\n }\n}\n\n/**\n * Update a submission with additional fields\n */\nexport async function updateSubmission(id: string, additionalFields: Record): Promise {\n try {\n // First get the existing submission\n const submission = await getSubmission(id);\n \n if (!submission) {\n throw new Error(\"Submission not found\");\n }\n \n // Merge existing additional fields with new ones\n const updatedFields = {\n ...submission.additionalFields,\n ...additionalFields\n };\n \n // Update the database\n await sqlite.execute(\n `UPDATE ${SUBMISSIONS_TABLE} \n SET additional_fields = ? \n WHERE id = ?`,\n [JSON.stringify(updatedFields), id]\n );\n \n return {\n ...submission,\n additionalFields: updatedFields\n };\n } catch (error) {\n console.error(\"Error updating submission:\", error);\n throw error;\n }\n}",[],[343,349],{"_106":357,"_99":358,"_150":359,"_152":344,"_153":139,"_154":155,"_156":120,"_108":360,"_103":33,"_158":171,"_160":361,"_161":27,"_162":-5,"_163":362,"_102":363},"76e996ee-2adf-11f0-ad9d-569c3dd06744","emailService.ts","76e99770-2adf-11f0-ad9d-569c3dd06744",["D",1746579970933],"import { email } from \"https://esm.town/v/std/email\";\n\nconst baseUrl = `https://devto.val.run`;\n\n/**\n * Send confirmation email with link to continue\n */\nexport async function sendConfirmationEmail(\n toEmail: string,\n companyName: string,\n uniqueId: string,\n): Promise {\n // For Val Town HTTP vals, we need to use query parameters instead of path parameters\n const continueUrl = `${baseUrl}?action=continue&id=${uniqueId}`;\n\n const subject = `LauraMepson: Continue Your Submission`;\n\n const text = `\nHello from LauraMepson!\n\nThank you for submitting your company information for ${companyName}.\n\nTo add more details to your submission, please click the link below:\n${continueUrl}\n\nThis link is unique to your submission and will allow you to add additional information.\n\nThank you,\nLauraMepson Team\n `;\n\n const html = `\n\n\n\n \n LauraMepson: Continue Your Submission\n\n\n

Hello from LauraMepson!

\n \n

Thank you for submitting your company information for ${companyName}.

\n \n

To add more details to your submission, please click the button below:

\n \n

\n Continue Your Submission\n

\n \n

This link is unique to your submission and will allow you to add additional information.

\n \n

If the button doesn't work, you can copy and paste this URL into your browser:

${continueUrl}

\n \n

Thank you,
LauraMepson Team

\n\n\n `;\n\n try {\n await email({\n to: toEmail,\n subject,\n text,\n html,\n });\n\n console.log(`Confirmation email sent to ${toEmail}`);\n return true;\n } catch (error) {\n console.error(\"Error sending confirmation email:\", error);\n throw error;\n }\n}",[],[343,358],{"_106":365,"_99":366,"_150":367,"_152":344,"_153":139,"_154":368,"_156":120,"_108":369,"_103":370,"_158":171,"_160":371,"_161":27,"_162":-5,"_163":372,"_102":373},"cfcaaaa4-2b67-11f0-9a88-569c3dd06744","imageService.ts","76e99a90-2adf-11f0-ad9d-569c3dd06744",183,["D",1746638531615],15,"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { ImageMetadata, UploadcareFile, UploadcareGroup } from \"../models/image.ts\";\nimport { getFileInfo, deleteFile, getGroupInfo, storeGroup } from \"./uploadcareService.ts\";\n\n// Table name for Uploadcare files\nconst UPLOADCARE_FILES_TABLE = 'uploadcare_files_v1';\n\n/**\n * Set up the Uploadcare files table\n */\nexport async function setupImagesTable(): Promise {\n try {\n console.log(`Setting up Uploadcare files table: ${UPLOADCARE_FILES_TABLE}`);\n \n // Create the new simplified table\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${UPLOADCARE_FILES_TABLE} (\n file_id TEXT PRIMARY KEY,\n submission_id TEXT NOT NULL,\n created_at TEXT NOT NULL,\n is_group BOOLEAN DEFAULT 0\n )`);\n \n // Create index for faster lookups by submission\n await sqlite.execute(`CREATE INDEX IF NOT EXISTS idx_submission_id ON ${UPLOADCARE_FILES_TABLE} (submission_id)`);\n \n console.log(\"Uploadcare files table setup complete\");\n \n // Check if we need to migrate data from old tables\n await migrateFromOldTables();\n } catch (error) {\n console.error(\"Error setting up Uploadcare files table:\", error);\n throw error;\n }\n}\n\n/**\n * Migrate data from old tables to the new simplified table\n */\nasync function migrateFromOldTables(): Promise {\n try {\n // Check if old tables exist\n const oldTablesExist = await Promise.all([\n checkTableExists('laura_mepson_images_v1'),\n checkTableExists('laura_mepson_images_v2')\n ]);\n \n const oldTableV1Exists = oldTablesExist[0];\n const oldTableV2Exists = oldTablesExist[1];\n \n if (!oldTableV1Exists && !oldTableV2Exists) {\n console.log('No old tables found, no migration needed');\n return;\n }\n \n // Check if we've already migrated data\n const newTableCount = await sqlite.execute(\n `SELECT COUNT(*) as count FROM ${UPLOADCARE_FILES_TABLE}`\n );\n \n if (newTableCount.rows[0].count > 0) {\n console.log(`New table already has ${newTableCount.rows[0].count} records, skipping migration`);\n return;\n }\n \n // Migrate from v2 table if it exists\n if (oldTableV2Exists) {\n console.log('Migrating data from laura_mepson_images_v2');\n \n const oldData = await sqlite.execute(\n `SELECT id, submission_id, uploaded_at, group_id FROM laura_mepson_images_v2`\n );\n \n if (oldData.rows.length > 0) {\n console.log(`Found ${oldData.rows.length} records to migrate from v2 table`);\n \n for (const row of oldData.rows) {\n try {\n // Check if this file is already in the new table\n const exists = await sqlite.execute(\n `SELECT file_id FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [row.id]\n );\n \n if (exists.rows.length === 0) {\n // Insert into new table\n await sqlite.execute(\n `INSERT INTO ${UPLOADCARE_FILES_TABLE} (file_id, submission_id, created_at, is_group) \n VALUES (?, ?, ?, ?)`,\n [\n row.id,\n row.submission_id,\n row.uploaded_at || new Date().toISOString(),\n row.group_id ? 1 : 0\n ]\n );\n }\n } catch (error) {\n console.error(`Error migrating record ${row.id}:`, error);\n // Continue with next record\n }\n }\n \n console.log('Migration from v2 table completed');\n } else {\n console.log('No data found in v2 table');\n }\n }\n \n // Migrate from v1 table if it exists and we haven't already migrated from v2\n if (oldTableV1Exists && !oldTableV2Exists) {\n console.log('Migrating data from laura_mepson_images_v1');\n \n const oldData = await sqlite.execute(\n `SELECT id, submission_id, uploaded_at FROM laura_mepson_images_v1`\n );\n \n if (oldData.rows.length > 0) {\n console.log(`Found ${oldData.rows.length} records to migrate from v1 table`);\n \n for (const row of oldData.rows) {\n try {\n // Check if this file is already in the new table\n const exists = await sqlite.execute(\n `SELECT file_id FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [row.id]\n );\n \n if (exists.rows.length === 0) {\n // Insert into new table\n await sqlite.execute(\n `INSERT INTO ${UPLOADCARE_FILES_TABLE} (file_id, submission_id, created_at, is_group) \n VALUES (?, ?, ?, ?)`,\n [\n row.id,\n row.submission_id,\n row.uploaded_at || new Date().toISOString(),\n 0 // Not a group in v1 table\n ]\n );\n }\n } catch (error) {\n console.error(`Error migrating record ${row.id}:`, error);\n // Continue with next record\n }\n }\n \n console.log('Migration from v1 table completed');\n } else {\n console.log('No data found in v1 table');\n }\n }\n \n console.log('Migration from old tables completed');\n } catch (error) {\n console.error('Error during migration:', error);\n // Continue even if migration fails\n }\n}\n\n/**\n * Check if a table exists in the database\n */\nasync function checkTableExists(tableName: string): Promise {\n try {\n const result = await sqlite.execute(\n `SELECT name FROM sqlite_master WHERE type='table' AND name=?`,\n [tableName]\n );\n \n return result.rows.length > 0;\n } catch (error) {\n console.error(`Error checking if table ${tableName} exists:`, error);\n return false;\n }\n}\n\n/**\n * Link an Uploadcare file to a submission\n */\nexport async function linkUploadcareFile(\n fileId: string,\n submissionId: string,\n isGroup: boolean = false\n): Promise {\n try {\n console.log(`Linking Uploadcare file: ${fileId} to submission: ${submissionId}`);\n \n // Check if this file is already linked\n const existing = await sqlite.execute(\n `SELECT file_id FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [fileId]\n );\n \n if (existing.rows.length > 0) {\n console.log(`File ${fileId} is already linked, updating submission_id`);\n \n // Update the existing record\n await sqlite.execute(\n `UPDATE ${UPLOADCARE_FILES_TABLE} SET \n submission_id = ?, \n is_group = ?\n WHERE file_id = ?`,\n [submissionId, isGroup ? 1 : 0, fileId]\n );\n } else {\n // Insert a new record\n await sqlite.execute(\n `INSERT INTO ${UPLOADCARE_FILES_TABLE} (file_id, submission_id, created_at, is_group) \n VALUES (?, ?, ?, ?)`,\n [fileId, submissionId, new Date().toISOString(), isGroup ? 1 : 0]\n );\n }\n \n return true;\n } catch (error) {\n console.error(`Error linking Uploadcare file ${fileId}:`, error);\n return false;\n }\n}\n\n/**\n * Unlink an Uploadcare file from a submission\n */\nexport async function unlinkUploadcareFile(\n fileId: string,\n submissionId: string\n): Promise {\n try {\n console.log(`Unlinking Uploadcare file: ${fileId} from submission: ${submissionId}`);\n \n // Verify the file belongs to this submission\n const existing = await sqlite.execute(\n `SELECT file_id FROM ${UPLOADCARE_FILES_TABLE} \n WHERE file_id = ? AND submission_id = ?`,\n [fileId, submissionId]\n );\n \n if (existing.rows.length === 0) {\n console.log(`File ${fileId} is not linked to submission ${submissionId}`);\n return false;\n }\n \n // Delete the record\n await sqlite.execute(\n `DELETE FROM ${UPLOADCARE_FILES_TABLE} WHERE file_id = ?`,\n [fileId]\n );\n \n return true;\n } catch (error) {\n console.error(`Error unlinking Uploadcare file ${fileId}:`, error);\n return false;\n }\n}\n\n/**\n * Get all Uploadcare files for a submission\n */\nexport async function getSubmissionFiles(submissionId: string): Promise {\n try {\n console.log(`Getting Uploadcare files for submission: ${submissionId}`);\n \n const result = await sqlite.execute(\n `SELECT file_id, is_group FROM ${UPLOADCARE_FILES_TABLE}\n WHERE submission_id = ?\n ORDER BY created_at DESC`,\n [submissionId]\n );\n \n // Process the results to handle groups\n const fileIds: string[] = [];\n \n for (const row of result.rows) {\n const fileId = row.file_id;\n const isGroup = row.is_group === 1;\n \n if (isGroup) {\n try {\n // For groups, we need to get the individual files\n console.log(`Expanding group: ${fileId}`);\n const groupInfo = await getGroupInfo(fileId);\n \n if (groupInfo && groupInfo.files) {\n // Add each file in the group\n for (let i = 0; i < groupInfo.files.length; i++) {\n const file = groupInfo.files[i];\n fileIds.push(file.uuid);\n }\n } else {\n // If we can't get group info, just add the group ID\n fileIds.push(fileId);\n }\n } catch (groupError) {\n console.error(`Error expanding group ${fileId}:`, groupError);\n // If there's an error, just add the group ID\n fileIds.push(fileId);\n }\n } else {\n // For individual files, just add the file ID\n fileIds.push(fileId);\n }\n }\n \n return fileIds;\n } catch (error) {\n console.error(`Error getting Uploadcare files for submission ${submissionId}:`, error);\n return [];\n }\n}\n\n/**\n * Get image metadata from database\n */\nexport async function getImageMetadata(imageId: string): Promise {\n try {\n console.log(`Getting image metadata for: ${imageId}`);\n \n // Try the new table first\n let result = await sqlite.execute(\n `SELECT id, original_name, content_type, size, uploaded_at, submission_id, cdn_url, group_id\n FROM ${IMAGES_TABLE}\n WHERE id = ?`,\n [imageId]\n );\n \n // If not found in the new table, try the old table if it exists\n if (result.rows.length === 0) {\n console.log(`Image not found in ${IMAGES_TABLE}, checking old table`);\n \n try {\n const oldTableExists = await checkTableExists('laura_mepson_images_v1');\n \n if (oldTableExists) {\n // Try to get from old table\n result = await sqlite.execute(\n `SELECT id, original_name, content_type, size, uploaded_at, submission_id, cdn_url, NULL as group_id\n FROM laura_mepson_images_v1\n WHERE id = ?`,\n [imageId]\n );\n \n // If found in old table, migrate this record to the new table\n if (result.rows.length > 0) {\n console.log(`Found image in old table, migrating to new table: ${imageId}`);\n \n const row = result.rows[0];\n \n // Insert into new table\n await sqlite.execute(\n `INSERT OR IGNORE INTO ${IMAGES_TABLE} (\n id, original_name, content_type, size, uploaded_at, submission_id, cdn_url, group_id\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n row.id,\n row.original_name,\n row.content_type,\n row.size,\n row.uploaded_at,\n row.submission_id,\n row.cdn_url,\n null // group_id is null for migrated records\n ]\n );\n }\n }\n } catch (oldTableError) {\n console.error(`Error checking old table: ${oldTableError.message}`);\n // Continue with the function even if old table check fails\n }\n }\n \n if (result.rows.length === 0) {\n console.log(`Image not found in any table: ${imageId}`);\n return null;\n }\n \n const row = result.rows[0];\n console.log(`Found image metadata: ${imageId}`, row);\n \n return {\n id: row.id,\n originalName: row.original_name,\n contentType: row.content_type,\n size: row.size,\n uploadedAt: row.uploaded_at,\n submissionId: row.submission_id,\n cdnUrl: row.cdn_url,\n groupId: row.group_id\n };\n } catch (error) {\n console.error(`Error getting image metadata for ${imageId}:`, error);\n return null;\n }\n}\n\n/**\n * List all images for a submission\n */\nexport async function listSubmissionImages(submissionId: string): Promise {\n try {\n console.log(`Listing images for submission: ${submissionId}`);\n \n // Get images from the new table\n const result = await sqlite.execute(\n `SELECT id, original_name, content_type, size, uploaded_at, submission_id, cdn_url, group_id\n FROM ${IMAGES_TABLE}\n WHERE submission_id = ?\n ORDER BY uploaded_at DESC`,\n [submissionId]\n );\n \n // Check if we need to look in the old table too\n let oldTableImages: any[] = [];\n try {\n const oldTableExists = await checkTableExists('laura_mepson_images_v1');\n \n if (oldTableExists) {\n console.log(`Checking old table for submission: ${submissionId}`);\n \n const oldResult = await sqlite.execute(\n `SELECT id, original_name, content_type, size, uploaded_at, submission_id, cdn_url\n FROM laura_mepson_images_v1\n WHERE submission_id = ?\n ORDER BY uploaded_at DESC`,\n [submissionId]\n );\n \n if (oldResult.rows.length > 0) {\n console.log(`Found ${oldResult.rows.length} images in old table for submission: ${submissionId}`);\n \n // Migrate these records to the new table\n for (const row of oldResult.rows) {\n try {\n // Check if this image is already in the new table\n const exists = await sqlite.execute(\n `SELECT id FROM ${IMAGES_TABLE} WHERE id = ?`,\n [row.id]\n );\n \n if (exists.rows.length === 0) {\n console.log(`Migrating image from old table to new table: ${row.id}`);\n \n // Insert into new table\n await sqlite.execute(\n `INSERT INTO ${IMAGES_TABLE} (\n id, original_name, content_type, size, uploaded_at, submission_id, cdn_url, group_id\n ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n [\n row.id,\n row.original_name,\n row.content_type,\n row.size,\n row.uploaded_at,\n row.submission_id,\n row.cdn_url,\n null // group_id is null for migrated records\n ]\n );\n }\n } catch (migrationError) {\n console.error(`Error migrating image ${row.id}:`, migrationError);\n // Continue with the next image even if this one fails\n }\n }\n \n // Add these to our result set if they're not already there\n for (const row of oldResult.rows) {\n // Check if this ID is already in our result set\n const exists = result.rows.some(r => r.id === row.id);\n \n if (!exists) {\n oldTableImages.push({\n id: row.id,\n original_name: row.original_name,\n content_type: row.content_type,\n size: row.size,\n uploaded_at: row.uploaded_at,\n submission_id: row.submission_id,\n cdn_url: row.cdn_url,\n group_id: null\n });\n }\n }\n }\n }\n } catch (oldTableError) {\n console.error(`Error checking old table: ${oldTableError.message}`);\n // Continue with the function even if old table check fails\n }\n \n // Combine results from both tables\n const allRows = [...result.rows, ...oldTableImages];\n \n // Sort by uploaded_at in descending order\n allRows.sort((a, b) => {\n return new Date(b.uploaded_at).getTime() - new Date(a.uploaded_at).getTime();\n });\n \n console.log(`Found ${allRows.length} total images for submission: ${submissionId}`);\n \n return allRows.map(row => ({\n id: row.id,\n originalName: row.original_name,\n contentType: row.content_type,\n size: row.size,\n uploadedAt: row.uploaded_at,\n submissionId: row.submission_id,\n cdnUrl: row.cdn_url,\n groupId: row.group_id\n }));\n } catch (error) {\n console.error(`Error listing submission images for ${submissionId}:`, error);\n return [];\n }\n}\n\n/**\n * Delete image metadata from database and the file from Uploadcare\n */\nexport async function deleteImage(imageId: string): Promise {\n try {\n console.log(`Deleting image: ${imageId}`);\n \n // First get the image metadata to ensure it exists\n const imageMetadata = await getImageMetadata(imageId);\n \n if (!imageMetadata) {\n console.error(`Image not found in database: ${imageId}`);\n return false;\n }\n \n // Try to delete from Uploadcare\n let uploadcareDeleteSuccess = false;\n try {\n console.log(`Deleting image from Uploadcare: ${imageId}`);\n uploadcareDeleteSuccess = await deleteFile(imageId);\n \n if (!uploadcareDeleteSuccess) {\n console.warn(`Failed to delete image from Uploadcare: ${imageId}`);\n // Continue with database deletion even if Uploadcare deletion fails\n } else {\n console.log(`Successfully deleted image from Uploadcare: ${imageId}`);\n }\n } catch (uploadcareError) {\n console.error(`Error deleting image from Uploadcare: ${imageId}`, uploadcareError);\n // Continue with database deletion even if Uploadcare deletion fails\n }\n \n // Then delete from our database\n try {\n console.log(`Deleting image from database: ${imageId}`);\n await sqlite.execute(\n `DELETE FROM ${IMAGES_TABLE} WHERE id = ?`,\n [imageId]\n );\n console.log(`Successfully deleted image from database: ${imageId}`);\n return true;\n } catch (dbError) {\n console.error(`Database error deleting image ${imageId}:`, dbError);\n return false;\n }\n } catch (error) {\n console.error(`Error deleting image ${imageId}:`, error);\n return false;\n }\n}\n\n/**\n * Register an Uploadcare file in our system\n */\nexport async function registerUploadcareFile(\n uploadcareUuid: string,\n submissionId: string,\n groupId?: string\n): Promise {\n try {\n console.log(`Registering Uploadcare file: ${uploadcareUuid} for submission: ${submissionId}`);\n \n // Get file info from Uploadcare\n let fileInfo;\n try {\n console.log(`Fetching file info from Uploadcare for UUID: ${uploadcareUuid}`);\n fileInfo = await getFileInfo(uploadcareUuid);\n console.log('Successfully retrieved file info from Uploadcare:', fileInfo);\n } catch (fileInfoError) {\n console.error(`Error getting file info from Uploadcare for ${uploadcareUuid}:`, fileInfoError);\n \n // Try to extract more details from the error\n let errorDetails = '';\n if (fileInfoError instanceof Error) {\n errorDetails = fileInfoError.message;\n console.error(`Error message: ${errorDetails}`);\n console.error(`Error stack: ${fileInfoError.stack}`);\n }\n \n // Check if we should create a fallback or throw\n if (errorDetails.includes('404') || errorDetails.includes('not found')) {\n console.error(`File not found on Uploadcare, UUID may be invalid: ${uploadcareUuid}`);\n throw new Error(`File not found on Uploadcare: ${uploadcareUuid}`);\n }\n \n if (errorDetails.includes('401') || errorDetails.includes('unauthorized')) {\n console.error(`Authentication failed with Uploadcare. Check your API keys.`);\n throw new Error(`Authentication failed with Uploadcare. Check your API keys.`);\n }\n \n // Create a minimal file info object if we can't get it from Uploadcare\n console.log('Creating fallback file info object');\n fileInfo = {\n uuid: uploadcareUuid,\n originalFilename: 'unknown-filename.jpg',\n mimeType: 'image/jpeg',\n size: 0,\n isImage: true,\n uploadedAt: new Date().toISOString(),\n url: '',\n originalUrl: '',\n cdnUrl: `https://ucarecdn.com/${uploadcareUuid}/`\n };\n }\n \n // Save metadata to our database\n try {\n console.log('Saving image metadata to database');\n const metadata = await saveImageMetadata(fileInfo, submissionId, groupId);\n console.log('Successfully saved image metadata:', metadata);\n return metadata;\n } catch (dbError) {\n console.error(`Database error saving image metadata: ${dbError.message}`, dbError);\n if (dbError.message.includes('UNIQUE constraint failed')) {\n console.log('This appears to be a duplicate image entry');\n throw new Error('This image has already been registered');\n }\n throw dbError;\n }\n } catch (error) {\n console.error(`Error registering Uploadcare file ${uploadcareUuid}:`, error);\n throw error; // Re-throw to allow proper error handling upstream\n }\n}\n\n/**\n * Register an Uploadcare file group in our system\n */\nexport async function registerUploadcareGroup(\n groupId: string,\n submissionId: string\n): Promise {\n try {\n console.log(`Registering Uploadcare group: ${groupId} for submission: ${submissionId}`);\n \n // Get group info from Uploadcare\n const groupInfo = await getGroupInfo(groupId);\n \n // Store the group permanently\n await storeGroup(groupId);\n \n // Register each file in the group\n const registeredFiles: ImageMetadata[] = [];\n \n for (const file of groupInfo.files) {\n const metadata = await registerUploadcareFile(file.uuid, submissionId, groupId);\n if (metadata) {\n registeredFiles.push(metadata);\n }\n }\n \n return registeredFiles;\n } catch (error) {\n console.error(`Error registering Uploadcare group ${groupId}:`, error);\n return [];\n }\n}",[],[343,366],{"_106":375,"_99":376,"_150":377,"_152":344,"_153":139,"_154":378,"_156":120,"_108":379,"_103":33,"_158":171,"_160":380,"_161":27,"_162":-5,"_163":381,"_102":382},"697c9298-2b4f-11f0-a8e2-569c3dd06744","templateService.ts","697c937e-2b4f-11f0-a8e2-569c3dd06744",90,["D",1746628052058],"import { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n/**\n * Service for handling HTML templates\n */\n\n/**\n * Render a template with the given data\n * @param templatePath Path to the template file\n * @param data Object containing key-value pairs to replace in the template\n * @param importMetaUrl import.meta.url from the calling file\n */\nexport async function renderTemplate(\n templatePath: string, \n data: Record, \n importMetaUrl: string\n): Promise {\n try {\n // Read the template file\n let html = await readFile(templatePath, importMetaUrl);\n \n // Replace all placeholders with their values\n for (const [key, value] of Object.entries(data)) {\n const placeholder = `{{${key}}}`;\n // Use a global regex to replace all occurrences\n const regex = new RegExp(placeholder, 'g');\n html = html.replace(regex, value);\n }\n \n return html;\n } catch (error) {\n console.error(`Error rendering template ${templatePath}:`, error);\n throw error;\n }\n}",[],[343,376],{"_106":384,"_99":385,"_150":386,"_152":344,"_153":139,"_154":387,"_156":120,"_108":388,"_103":389,"_158":171,"_160":390,"_161":27,"_162":-5,"_163":391,"_102":392},"334ad646-2b5c-11f0-bc36-569c3dd06744","uploadcareService.ts","76e9a9a4-2adf-11f0-ad9d-569c3dd06744",147,["D",1746633544590],14,"/**\n * Uploadcare integration service\n * Simplified to leverage more Uploadcare built-in features\n */\n\n// Public key for Uploadcare\nexport const UPLOADCARE_PUBLIC_KEY = '1759805aecfaf0cc68cc';\n\n// Secret key is stored in environment variables\nconst UPLOADCARE_SECRET_KEY = Deno.env.get('UPLOADCARE_SECRET_KEY');\n\n// Uploadcare API endpoints\nconst UPLOADCARE_API_BASE = 'https://api.uploadcare.com';\nconst UPLOADCARE_CDN_BASE = 'https://ucarecdn.com';\n\n// Initialize keys and ensure they're available\nlet keysInitialized = false;\n\n/**\n * Ensure keys are initialized\n */\nexport function ensureKeysInitialized(): boolean {\n if (!keysInitialized) {\n console.log('Initializing Uploadcare keys');\n console.log(`Public key: ${UPLOADCARE_PUBLIC_KEY}`);\n \n if (!UPLOADCARE_SECRET_KEY) {\n console.warn('UPLOADCARE_SECRET_KEY environment variable is not set');\n } else {\n console.log('Secret key is set (value hidden)');\n }\n \n keysInitialized = true;\n }\n return keysInitialized;\n}\n\n/**\n * Get comprehensive Uploadcare widget configuration\n * This configuration is now primarily handled via data attributes in HTML\n * @param customOptions - Optional custom configuration options\n */\nexport function getUploadcareConfig(customOptions = {}) {\n ensureKeysInitialized();\n \n // Default configuration with best practices from Uploadcare docs\n const defaultConfig = {\n // Core settings\n publicKey: UPLOADCARE_PUBLIC_KEY,\n \n // UI settings\n tabs: 'file camera url facebook gdrive gphotos dropbox instagram',\n previewStep: true,\n clearable: true,\n \n // Image settings\n imageShrink: '2048x2048',\n \n // Upload settings\n multipleMax: 10,\n \n // Image editing features\n crop: 'free,1:1,3:2,4:3,16:9',\n imagesOnly: true,\n \n // Integration settings\n integration: 'LauraMepson-Portal',\n \n // Effects\n effects: ['crop', 'enhance', 'sharp', 'grayscale'],\n };\n \n // Merge default config with custom options\n return { ...defaultConfig, ...customOptions };\n}\n\n/**\n * Create authentication headers for Uploadcare REST API\n */\nexport function getUploadcareAuthHeaders(): HeadersInit {\n ensureKeysInitialized();\n \n // Current date in RFC2822 format\n const date = new Date().toUTCString();\n \n // Check if secret key is available\n if (!UPLOADCARE_SECRET_KEY) {\n console.error('UPLOADCARE_SECRET_KEY is missing! Authentication will fail.');\n }\n \n const headers = {\n 'Date': date,\n 'Authorization': `Uploadcare.Simple ${UPLOADCARE_PUBLIC_KEY}:${UPLOADCARE_SECRET_KEY || 'missing-secret-key'}`,\n 'Accept': 'application/vnd.uploadcare-v0.7+json',\n 'Content-Type': 'application/json'\n };\n \n return headers;\n}\n\n/**\n * Get file info from Uploadcare\n * Uses Uploadcare's REST API to get detailed file information\n */\nexport async function getFileInfo(fileId: string): Promise {\n try {\n ensureKeysInitialized();\n \n console.log(`Fetching file info from Uploadcare for file ID: ${fileId}`);\n console.log(`Using API URL: ${UPLOADCARE_API_BASE}/files/${fileId}/`);\n \n // Check if we have a secret key\n if (!UPLOADCARE_SECRET_KEY) {\n console.error('UPLOADCARE_SECRET_KEY is not set. Authentication will fail.');\n throw new Error('Uploadcare secret key is not configured');\n }\n \n const headers = getUploadcareAuthHeaders();\n console.log('Request headers:', {\n Date: headers['Date'],\n Accept: headers['Accept'],\n 'Content-Type': headers['Content-Type'],\n // Don't log the full Authorization header for security\n Authorization: headers['Authorization'] ? 'Set (value hidden)' : 'Not set'\n });\n \n // Make the API request\n let response;\n try {\n response = await fetch(`${UPLOADCARE_API_BASE}/files/${fileId}/`, {\n headers: headers\n });\n \n console.log(`Uploadcare API response status: ${response.status} ${response.statusText}`);\n } catch (fetchError) {\n console.error('Network error fetching from Uploadcare API:', fetchError);\n throw new Error(`Network error: ${fetchError.message}`);\n }\n \n // Handle non-OK responses\n if (!response.ok) {\n let errorText;\n try {\n errorText = await response.text();\n } catch (e) {\n errorText = 'Could not read error response';\n }\n \n console.error(`Uploadcare API error: ${response.status} ${response.statusText} - ${errorText}`);\n \n // Provide more specific error messages based on status code\n if (response.status === 401) {\n throw new Error('Authentication failed: Invalid Uploadcare API credentials');\n } else if (response.status === 404) {\n throw new Error(`File not found: ${fileId}`);\n } else if (response.status === 429) {\n throw new Error('Rate limit exceeded: Too many requests to Uploadcare API');\n } else {\n throw new Error(`Failed to get file info: ${response.status} ${response.statusText} - ${errorText}`);\n }\n }\n \n // Parse the response\n let data;\n try {\n data = await response.json();\n console.log('Uploadcare file info response:', data);\n } catch (parseError) {\n console.error('Error parsing Uploadcare API response:', parseError);\n throw new Error('Invalid response from Uploadcare API');\n }\n \n // Validate the response data\n if (!data || !data.uuid) {\n console.error('Invalid or missing data in Uploadcare response:', data);\n throw new Error('Invalid data received from Uploadcare API');\n }\n \n // Return the processed data\n return {\n uuid: data.uuid,\n originalFilename: data.original_filename || 'unknown',\n mimeType: data.mime_type || 'application/octet-stream',\n size: data.size || 0,\n isImage: data.is_image || false,\n imageInfo: data.image_info,\n uploadedAt: data.datetime_uploaded || new Date().toISOString(),\n url: data.url || '',\n originalUrl: data.original_file_url || '',\n cdnUrl: data.cdn_url || `${UPLOADCARE_CDN_BASE}/${fileId}/`,\n // Include the raw data for access to all Uploadcare properties\n raw: data\n };\n } catch (error) {\n console.error(`Error in getFileInfo for ${fileId}:`, error);\n throw error;\n }\n}\n\n/**\n * Delete file from Uploadcare\n */\nexport async function deleteFile(fileId: string): Promise {\n try {\n const response = await fetch(`${UPLOADCARE_API_BASE}/files/${fileId}/storage/`, {\n method: 'DELETE',\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n throw new Error(`Failed to delete file: ${response.status} ${response.statusText}`);\n }\n \n return true;\n } catch (error) {\n console.error('Error deleting file from Uploadcare:', error);\n return false;\n }\n}\n\n/**\n * Store file permanently on Uploadcare\n * By default, files are stored temporarily and may be deleted after 24 hours\n */\nexport async function storeFile(fileId: string): Promise {\n try {\n const response = await fetch(`${UPLOADCARE_API_BASE}/files/${fileId}/storage/`, {\n method: 'PUT',\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n throw new Error(`Failed to store file: ${response.status} ${response.statusText}`);\n }\n \n return true;\n } catch (error) {\n console.error('Error storing file on Uploadcare:', error);\n return false;\n }\n}\n\n/**\n * List files from Uploadcare\n * @param limit - Maximum number of files to return (default: 100)\n * @param stored - Filter by storage status (true = stored, false = not stored)\n */\nexport async function listFiles(limit = 100, stored?: boolean): Promise {\n try {\n let url = `${UPLOADCARE_API_BASE}/files/?limit=${limit}`;\n \n if (stored !== undefined) {\n url += `&stored=${stored ? 'true' : 'false'}`;\n }\n \n const response = await fetch(url, {\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n throw new Error(`Failed to list files: ${response.status} ${response.statusText}`);\n }\n \n const data = await response.json();\n return data.results || [];\n } catch (error) {\n console.error('Error listing files from Uploadcare:', error);\n return [];\n }\n}\n\n/**\n * Generate a CDN URL with transformations\n * Note: Uploadcare's JavaScript library provides built-in methods for this,\n * but this function is kept for server-side URL generation\n * @param fileId - Uploadcare file UUID\n * @param options - Transformation options\n */\nexport function generateCdnUrl(fileId: string, options: {\n resize?: string; // e.g., \"300x200\"\n crop?: string; // e.g., \"300x200/center\"\n quality?: number; // 1-100\n format?: string; // jpeg, png, webp, etc.\n effect?: string; // grayscale, flip, mirror, enhance, sharp\n progressive?: boolean;\n preview?: boolean;\n} = {}): string {\n const transformations: string[] = [];\n \n // Add transformations in the correct order\n if (options.resize) transformations.push(`-/resize/${options.resize}/`);\n if (options.crop) transformations.push(`-/crop/${options.crop}/`);\n if (options.quality) transformations.push(`-/quality/${options.quality}/`);\n if (options.effect) {\n const effects = options.effect.split(',');\n for (const effect of effects) {\n transformations.push(`-/${effect}/`);\n }\n }\n if (options.progressive) transformations.push('-/progressive/yes/');\n if (options.preview) transformations.push('-/preview/');\n if (options.format) transformations.push(`-/format/${options.format}/`);\n \n // Construct the final URL\n return `${UPLOADCARE_CDN_BASE}/${fileId}/${transformations.join('')}`;\n}\n\n/**\n * Get image dimensions and other metadata\n * This is a convenience function that extracts image dimensions from file info\n */\nexport async function getImageDimensions(fileId: string): Promise<{width: number, height: number} | null> {\n try {\n const fileInfo = await getFileInfo(fileId);\n \n if (fileInfo.isImage && fileInfo.imageInfo) {\n return {\n width: fileInfo.imageInfo.width,\n height: fileInfo.imageInfo.height\n };\n }\n \n return null;\n } catch (error) {\n console.error('Error getting image dimensions:', error);\n return null;\n }\n}\n\n/**\n * Get file group info from Uploadcare\n * @param groupId - Uploadcare group UUID\n */\nexport async function getGroupInfo(groupId: string): Promise {\n try {\n ensureKeysInitialized();\n \n const response = await fetch(`${UPLOADCARE_API_BASE}/groups/${groupId}/`, {\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(`Failed to get group info: ${response.status} ${response.statusText} - ${errorText}`);\n }\n \n // Return the raw response to maintain all Uploadcare data\n return await response.json();\n } catch (error) {\n console.error('Error getting group info from Uploadcare:', error);\n throw error;\n }\n}\n\n/**\n * Store a file group permanently on Uploadcare\n */\nexport async function storeGroup(groupId: string): Promise {\n try {\n const response = await fetch(`${UPLOADCARE_API_BASE}/groups/${groupId}/storage/`, {\n method: 'PUT',\n headers: getUploadcareAuthHeaders()\n });\n \n if (!response.ok) {\n throw new Error(`Failed to store group: ${response.status} ${response.statusText}`);\n }\n \n return true;\n } catch (error) {\n console.error('Error storing group on Uploadcare:', error);\n return false;\n }\n}\n\n/**\n * Create a new file group from individual files\n * @param fileIds - Array of file UUIDs to include in the group\n */\nexport async function createGroup(fileIds: string[]): Promise {\n try {\n const response = await fetch(`${UPLOADCARE_API_BASE}/groups/`, {\n method: 'POST',\n headers: getUploadcareAuthHeaders(),\n body: JSON.stringify({\n files: fileIds.map(id => ({ uuid: id }))\n })\n });\n \n if (!response.ok) {\n throw new Error(`Failed to create group: ${response.status} ${response.statusText}`);\n }\n \n const data = await response.json();\n return data.id || null;\n } catch (error) {\n console.error('Error creating group on Uploadcare:', error);\n return null;\n }\n}",[],[343,385],[343],{"_106":395,"_99":396,"_150":397,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":398,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":399,"_102":418},"76e9e93c-2adf-11f0-ad9d-569c3dd06744","utils","61f60706-523c-4a44-8813-8acd53f13546",["D",1746579970933],[400,409],{"_106":401,"_99":402,"_150":403,"_152":397,"_153":139,"_154":404,"_156":120,"_108":405,"_103":181,"_158":171,"_160":406,"_161":27,"_162":-5,"_163":407,"_102":408},"c7ee0e52-2b49-11f0-ac5c-569c3dd06744","helpers.ts","76e9be4e-2adf-11f0-ad9d-569c3dd06744",76,["D",1746625633522],"/**\n * Generate a cryptographically secure random string\n * @param length The length of the random string to generate\n */\nfunction generateSecureRandomString(length: number): string {\n const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\n let result = '';\n \n // Create an array of random values\n const randomValues = new Uint8Array(length);\n \n // Fill with cryptographically secure random values if available\n if (typeof crypto !== 'undefined' && crypto.getRandomValues) {\n crypto.getRandomValues(randomValues);\n } else {\n // Fallback to Math.random() if crypto is not available\n for (let i = 0; i < length; i++) {\n randomValues[i] = Math.floor(Math.random() * 256);\n }\n }\n \n // Convert random values to characters\n for (let i = 0; i < length; i++) {\n result += characters.charAt(randomValues[i] % characters.length);\n }\n \n return result;\n}\n\n/**\n * Generate a unique ID for submissions\n * Creates a longer, more secure token to prevent brute force attacks\n */\nexport function generateUniqueId(): string {\n // Generate a secure random string (32 characters)\n const randomPart1 = generateSecureRandomString(16);\n const randomPart2 = generateSecureRandomString(16);\n \n // Add a timestamp component for uniqueness (in base36)\n const timestampPart = Date.now().toString(36);\n \n // Add a counter component to ensure uniqueness even if called in the same millisecond\n const counterPart = Math.floor(Math.random() * 10000).toString(36).padStart(4, '0');\n \n // Combine all parts with separators\n return `${timestampPart}-${randomPart1}-${counterPart}-${randomPart2}`;\n}\n\n/**\n * Format file size for display\n */\nexport function formatFileSize(bytes: number): string {\n if (bytes < 1024) return bytes + ' bytes';\n else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';\n else return (bytes / 1048576).toFixed(1) + ' MB';\n}",[],[396,402],{"_106":410,"_99":411,"_150":412,"_152":397,"_153":139,"_154":413,"_156":120,"_108":414,"_103":33,"_158":171,"_160":415,"_161":27,"_162":-5,"_163":416,"_102":417},"7d9e49d8-2b4f-11f0-93cc-569c3dd06744","responseUtils.ts","7d9e4a8c-2b4f-11f0-93cc-569c3dd06744",93,["D",1746628085834],"import { Context } from \"https://esm.sh/hono@3.12.6\";\n\n/**\n * Standard API response format\n */\nexport interface ApiResponse {\n success: boolean;\n message: string;\n data?: T;\n}\n\n/**\n * Create a success response\n */\nexport function successResponse(\n c: Context, \n message: string, \n data?: T, \n status = 200\n): Response {\n const response: ApiResponse = {\n success: true,\n message\n };\n \n if (data !== undefined) {\n response.data = data;\n }\n \n return c.json(response, status);\n}\n\n/**\n * Create an error response\n */\nexport function errorResponse(\n c: Context, \n message: string, \n status = 400,\n error?: Error\n): Response {\n // Log the error if provided\n if (error) {\n console.error(`Error (${status}): ${message}`, error);\n }\n \n return c.json({\n success: false,\n message\n }, status);\n}\n\n/**\n * Create a not found response\n */\nexport function notFoundResponse(\n c: Context, \n message = \"Resource not found\"\n): Response {\n return errorResponse(c, message, 404);\n}\n\n/**\n * Create a server error response\n */\nexport function serverErrorResponse(\n c: Context, \n error: Error,\n message = \"An internal server error occurred\"\n): Response {\n return errorResponse(c, message, 500, error);\n}",[],[396,411],[396],{"_106":420,"_99":421,"_150":422,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":423,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":424,"_102":444},"76e9eae0-2adf-11f0-ad9d-569c3dd06744","views","3e3c76da-6b4b-412e-8890-2e14946c4ade",["D",1746579970933],[425,435],{"_106":426,"_99":427,"_150":428,"_152":422,"_153":139,"_154":429,"_156":120,"_108":430,"_103":431,"_158":273,"_160":432,"_161":27,"_162":-5,"_163":433,"_102":434},"ab10c0cc-2b6c-11f0-9b1f-569c3dd06744","continue.html","cbd14f54-2b4c-11f0-ab93-569c3dd06744",210,["D",1746640617486],21,"\n\n\n \n \n Ad Portal - LauraMepson\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

LauraMepson

Ad Portal

\n \n \n

\n 👤\n

Account Information

\n \n

\n Company: {{COMPANY_NAME}}
\n Email: {{EMAIL}}
\n Your Unique Link: https://{{HOST}}/?action=continue&id={{ID}}\n

\n Save this link to access your ad portal later.\n

\n \n

\n \n \n \n

\n 🏢\n

Image Gallery

\n \n

Upload images to use in your ads. These images will be available to select when creating new ads.

\n \n \n

\n \n

\n \n \n

\n \n

\n \n \n

Your Images

\n \n \n

\n 0 images\n

\n \n \n

\n 📢\n

Ad Creation

\n \n

Create and manage your ads. Select images from your gallery to use in your ads.

\n \n \n

Ad creation tools coming soon!

You'll be able to create ads and select images from your gallery.

\n \n \n

\n \n

\n Your information has been saved successfully!\n

\n \n

\n \n \n\n \n \n\n",[],[421,427],{"_106":436,"_99":437,"_150":438,"_152":422,"_153":139,"_154":439,"_156":120,"_108":440,"_103":299,"_158":273,"_160":441,"_161":27,"_162":-5,"_163":442,"_102":443},"98f50610-2b70-11f0-b795-569c3dd06744","landing.html","76e9d794-2adf-11f0-ad9d-569c3dd06744",226,["D",1746642305088],"\n\n\n \n \n LauraMepson\n \n \n \n\n\n

LauraMepson

\n \n \n \n \n \n

Already have an account?

\n \n \n

\n If an account exists with this email, you'll receive a link shortly.\n

\n \n

\n \n \n

\n \n

Submission Successful!

Thank you for your submission! We've sent a confirmation email with next steps.

Please check your inbox for important information about your submission.

\n \n \n

\n \n \n\n \n\n",[],[421,437],[421],{"_106":446,"_99":447,"_150":448,"_152":-5,"_153":139,"_154":449,"_156":120,"_108":450,"_103":451,"_158":273,"_160":452,"_161":27,"_162":-5,"_163":453,"_102":454},"0273cdde-2b70-11f0-8dbe-569c3dd06744","README.md","c72e72ce-2aa2-11f0-ab66-569c3dd06744",221,["D",1746642052583],10,"# LauraMepson Landing Page\n\nA landing page application that collects company information and allows users to add additional details through email links.\n\n## Features\n\n- Simple landing page with LauraMepson branding\n- Form to collect company name and email\n- SQLite database storage for submissions\n- Email functionality to send users a unique link\n- Continuation page for adding more information\n- Image upload and storage using Uploadcare\n\n## Uploadcare Group Fix\n\nThis project includes solutions for handling Uploadcare image uploads, specifically addressing the issue where multi-file uploads create groups instead of individual files.\n\n### The Problem\n\nWhen using Uploadcare's multi-file uploader, files are grouped together with a UUID like:\n`cb08730c-9c8b-46bb-a79e-9ab0f228939e~1`\n\nTo access individual files, you need to use the `/nth/0/` syntax, which can be cumbersome and doesn't give you direct access to individual file UUIDs.\n\n### Solutions\n\nTwo solutions are provided:\n\n1. **Use Single File Uploaders**: Configure Uploadcare widgets to upload one file at a time\n2. **Extract Individual Files from Groups**: Use the multi-file uploader but extract individual file UUIDs\n\n### Demo Pages\n\n- `/public/uploadcare-demo.ts` - A comprehensive demo showing both problems and solutions\n- `/public/uploadcare-fix.ts` - A focused solution with implementation guide\n- `/public/single-file-demo.ts` - A demo of the single file uploader solution\n\n### Implementation\n\nThe single file uploader solution has been implemented in the main application:\n\n1. Changed `UPLOADCARE_MULTIPLE` to `false` in the global configuration\n2. Implemented a clean UI with a single uploader and \"Add Another Image\" button\n3. Updated the JavaScript to handle individual file uploads\n4. Added a helper script (`/public/js/uploadcare-helper.js`) with utility functions\n\n## Project Structure\n\n```\n├── api/ # API route handlers\n│ ├── images.ts # Image-related API endpoints\n│ ├── submissions.ts # Submission-related API endpoints\n│ └── index.ts # API routes configuration\n├── controllers/ # Request handling logic\n│ ├── imageController.ts # Image upload/retrieval logic\n│ └── submissionController.ts # Submission handling logic\n├── models/ # Data models and types\n│ ├── image.ts # Image-related types\n│ └── submission.ts # Submission-related types\n├── services/ # Business logic\n│ ├── imageService.ts # Image metadata operations\n│ ├── uploadcareService.ts # Uploadcare integration\n│ ├── databaseService.ts # Database operations\n│ ├── emailService.ts # Email sending functionality\n│ └── templateService.ts # HTML template rendering\n├── utils/ # Utility functions\n│ ├── helpers.ts # Helper functions\n│ └── responseUtils.ts # Standardized API responses\n├── views/ # HTML templates\n│ ├── landing.html # Main landing page\n│ └── continue.html # Continuation page\n├── public/ # Static assets and client-side JS\n│ ├── css/ # Stylesheets\n│ │ └── styles.css # Common styles\n│ └── js/ # Client-side JavaScript\n│ ├── landing.js # Landing page script\n│ └── continue.js # Continuation page script\n└── index.ts # Main entry point\n```\n\n## Database Schema\n\nThe application uses a SQLite database with the following schemas:\n\n### Submissions Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n### Images Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_images_v1 (\n id TEXT PRIMARY KEY,\n original_name TEXT NOT NULL,\n content_type TEXT NOT NULL,\n size INTEGER NOT NULL,\n uploaded_at TEXT NOT NULL,\n submission_id TEXT NOT NULL,\n cdn_url TEXT NOT NULL\n)\n```\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Uploadcare:\n- Uploadcare handles file uploads, storage, and CDN delivery\n- Uploadcare's built-in image preview and cropping tools are used\n- Image metadata is stored in our SQLite database\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Environment Variables\n\n- `UPLOADCARE_SECRET_KEY`: Secret key for Uploadcare API authentication\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `emailService.ts`\n- The unique ID generation is handled in `utils/helpers.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing\n\n## Database Schema\n\nThe application uses a SQLite database with the following schema:\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Val Town's blob storage:\n- Images are stored with a unique ID\n- Metadata is stored alongside each image\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `email.ts`\n- The unique ID generation is handled in `utils.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing",[],[447],{"_106":456,"_99":177,"_150":118,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":457,"_103":389,"_158":318,"_160":458,"_161":27,"_162":98,"_163":459,"_102":460},"76ea2244-2adf-11f0-ad9d-569c3dd06744",["D",1746579970933],"import { Hono } from \"https://esm.sh/hono@3.12.6\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport apiRouter from \"./api/index.ts\";\nimport { setupDatabase } from \"./services/databaseService.ts\";\nimport { setupImagesTable } from \"./services/imageService.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(err);\n throw err;\n});\n\n// Initialize database and image storage\napp.use(\"*\", async (c, next) => {\n try {\n await setupDatabase();\n await setupImagesTable();\n } catch (error) {\n console.error(\"Error initializing storage:\", error);\n }\n return next();\n});\n\n// Serve static files\napp.get(\"/public/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Mount the API router\napp.route(\"/\", apiRouter);\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[177],"files",[147,165,175,185,194,204,210,220,231,237,246,255,261,267,278,284,294,303,313,322,331,341,347,356,364,374,383,394,400,409,419,425,435,445,455],"counts",{"_465":33,"_466":94,"_467":33,"_468":33},"pulls","branches","forks","envVars","contents",[471,474,477,480,483,486,489,492,495],{"_106":148,"_99":149,"_150":151,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":472,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":473},["D",1746579970933],[149],{"_106":205,"_99":206,"_150":207,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":475,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":476},["D",1746579970933],[206],{"_106":232,"_99":233,"_150":234,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":478,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":479},["D",1746579970933],[233],{"_106":256,"_99":257,"_150":258,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":481,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":482},["D",1746579970933],[257],{"_106":342,"_99":343,"_150":344,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":484,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":485},["D",1746579970933],[343],{"_106":395,"_99":396,"_150":397,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":487,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":488},["D",1746579970933],[396],{"_106":420,"_99":421,"_150":422,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":490,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":491},["D",1746579970933],[421],{"_106":446,"_99":447,"_150":448,"_152":-5,"_153":139,"_154":449,"_156":120,"_108":493,"_103":451,"_158":273,"_160":452,"_161":27,"_162":-5,"_102":494},["D",1746642052583],[447],{"_106":456,"_99":177,"_150":118,"_152":-5,"_153":139,"_154":155,"_156":120,"_108":496,"_103":389,"_158":318,"_160":458,"_161":27,"_162":98,"_102":497},["D",1746579970933],[177],"upstream","screenshots",{"_501":502,"_503":504},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=220&url=https%3A%2F%2Fdevto--9829a20a2aa211f08816569c3dd06744.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=220&url=https%3A%2F%2Fdevto--9829a20a2aa211f08816569c3dd06744.web.val.run","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":509,"_513":514,"_751":33,"_752":120},{"_106":107,"_99":100,"_108":510,"_110":-5,"_111":27,"_112":113,"_114":-5,"_115":-5,"_12":116,"_117":118,"_119":120,"_121":122,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":511,"_136":512},["D",1746553245576],{"_97":98,"_134":135},{"_103":138,"_99":43,"_106":139,"_140":107,"_141":-5,"_142":-5,"_143":-5,"_144":-5},"history",[515,520,525,530,539,547,555,560,565,572,582,587,594,604,609,616,626,635,640,645,654,663,672,679,686,695,700,709,718,727,736,744],{"_150":297,"_103":138,"_108":516,"_153":139,"_461":517},["D",1746642313332],[518],{"_106":295,"_153":139,"_150":297,"_99":296,"_160":300,"_158":171,"_103":299,"_152":281,"_108":516,"_154":138,"_162":-5,"_156":120,"_161":27,"_102":519},[257,280,296],{"_150":438,"_103":439,"_108":521,"_153":139,"_461":522},["D",1746642305088],[523],{"_106":436,"_153":139,"_150":438,"_99":437,"_160":441,"_158":273,"_103":299,"_152":422,"_108":521,"_154":439,"_162":-5,"_156":120,"_161":27,"_102":524},[421,437],{"_150":223,"_103":224,"_108":526,"_153":139,"_461":527},["D",1746642299665],[528],{"_106":221,"_153":139,"_150":223,"_99":222,"_160":227,"_158":171,"_103":226,"_152":207,"_108":526,"_154":224,"_162":-5,"_156":120,"_161":27,"_102":529},[206,222],{"_150":223,"_103":531,"_108":532,"_153":139,"_461":533},224,["D",1746642290339],[534],{"_106":535,"_153":139,"_150":223,"_99":222,"_160":536,"_158":171,"_103":537,"_152":207,"_108":532,"_154":531,"_162":-5,"_156":27,"_161":27,"_102":538},"903451de-2b70-11f0-bc1f-569c3dd06744","import { Context } from \"https://esm.sh/hono@3.12.6\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { \n setupDatabase, \n saveSubmission, \n getSubmission,\n findSubmissionByEmail,\n updateSubmission \n} from \"../services/databaseService.ts\";\nimport { sendConfirmationEmail } from \"../services/emailService.ts\";\nimport { generateUniqueId } from \"../utils/helpers.ts\";\nimport { UpdateSubmissionDto } from \"../models/submission.ts\";\nimport { renderTemplate } from \"../services/templateService.ts\";\nimport { successResponse, errorResponse, notFoundResponse, serverErrorResponse } from \"../utils/responseUtils.ts\";\n\n/**\n * Render the landing page\n */\nexport async function renderLandingPage(c: Context): Promise {\n const html = await readFile(\"/views/landing.html\", import.meta.url);\n return c.html(html);\n}\n\n/**\n * Render the continuation page\n */\nexport async function renderContinuationPage(c: Context): Promise {\n const id = c.req.query(\"id\");\n \n if (!id) {\n return c.text(\"Invalid or expired link\", 404);\n }\n \n const submission = await getSubmission(id);\n \n if (!submission) {\n return c.text(\"Invalid or expired link\", 404);\n }\n \n // Get the host from the request\n const host = c.req.header(\"host\") || \"app.lauramepson.com\";\n \n // Use the template service to render the HTML\n const html = await renderTemplate(\"/views/continue.html\", {\n COMPANY_NAME: submission.companyName,\n EMAIL: submission.email,\n ID: id,\n HOST: host\n }, import.meta.url);\n \n return c.html(html);\n}\n\n/**\n * Handle form submission\n */\nexport async function handleSubmission(c: Context): Promise {\n try {\n // Initialize database if needed\n await setupDatabase();\n \n const formData = await c.req.formData();\n const companyName = formData.get(\"companyName\")?.toString() || \"\";\n const email = formData.get(\"email\")?.toString() || \"\";\n \n if (!companyName || !email) {\n return errorResponse(c, \"Company name and email are required\", 400);\n }\n \n // Check if email already exists\n const existingSubmission = await findSubmissionByEmail(email);\n if (existingSubmission) {\n // Send a new confirmation email with the existing ID\n await sendConfirmationEmail(email, companyName, existingSubmission.id);\n \n // Use a generic message that doesn't reveal this is a returning user\n return successResponse(c, \"Thank you! We've sent an email with instructions to continue.\");\n }\n \n // Generate unique ID for this submission\n const uniqueId = generateUniqueId();\n \n // Save to database\n await saveSubmission(uniqueId, companyName, email);\n \n // Send confirmation email\n await sendConfirmationEmail(email, companyName, uniqueId);\n \n return successResponse(c, \"Thank you! We've sent an email with instructions to continue.\");\n } catch (error) {\n return serverErrorResponse(c, error, \"An error occurred processing your submission\");\n }\n}\n\n/**\n * Update submission with additional fields\n */\nexport async function updateSubmissionInfo(c: Context): Promise {\n try {\n const body = await c.req.json();\n const id = body.id;\n \n if (!id) {\n return errorResponse(c, \"Submission ID is required\", 400);\n }\n \n // Get the submission to make sure it exists\n const submission = await getSubmission(id);\n if (!submission) {\n return notFoundResponse(c, \"Submission not found\");\n }\n \n // Remove id from the fields to update\n const { id: _, images: __, ...fieldsToUpdate } = body;\n \n // Update the submission in the database\n await updateSubmission(id, fieldsToUpdate);\n \n return successResponse(c, \"Additional information saved!\", { id });\n } catch (error) {\n return serverErrorResponse(c, error, \"An error occurred updating your submission\");\n }\n}\n\n/**\n * Request a magic link for existing users\n */\nexport async function requestMagicLink(c: Context): Promise {\n try {\n const body = await c.req.json();\n const email = body.email;\n \n if (!email) {\n // For security, don't reveal that email is required\n return successResponse(c, \"If your email exists, you'll receive a magic link shortly.\");\n }\n \n // Find submission by email\n const submission = await findSubmissionByEmail(email);\n \n // If submission exists, send a confirmation email\n if (submission) {\n await sendConfirmationEmail(email, submission.companyName, submission.id);\n console.log(`Magic link sent to existing user: ${email}`);\n } else {\n console.log(`Magic link requested for non-existent email: ${email}`);\n }\n \n // Always return success for security (don't reveal if email exists)\n return successResponse(c, \"If your email exists, you'll receive a magic link shortly.\");\n } catch (error) {\n console.error(\"Error requesting magic link:\", error);\n // Still return success for security\n return successResponse(c, \"If your email exists, you'll receive a magic link shortly.\");\n }\n}",6,[206,222],{"_150":438,"_103":540,"_108":541,"_153":139,"_461":542},223,["D",1746642282107],[543],{"_106":544,"_153":139,"_150":438,"_99":437,"_160":545,"_158":273,"_103":94,"_152":422,"_108":541,"_154":540,"_162":-5,"_156":27,"_161":27,"_102":546},"8b423df8-2b70-11f0-bf65-569c3dd06744","\n\n\n \n \n LauraMepson\n \n \n \n\n\n

LauraMepson

\n \n \n \n \n \n

Already have an account?

\n \n \n

\n If your email exists in our system, you'll receive a magic link shortly.\n

\n \n

\n \n \n

\n \n

Submission Successful!

Thank you for your submission! We've sent a confirmation email with next steps.

Please check your inbox for important information about your submission.

\n \n \n

\n \n \n\n \n\n",[421,437],{"_150":297,"_103":548,"_108":549,"_153":139,"_461":550},222,["D",1746642273375],[551],{"_106":552,"_153":139,"_150":297,"_99":296,"_160":553,"_158":171,"_103":94,"_152":281,"_108":549,"_154":548,"_162":-5,"_156":27,"_161":27,"_102":554},"860d8978-2b70-11f0-92e5-569c3dd06744","document.addEventListener('DOMContentLoaded', () => {\n // Main submission form\n const form = document.getElementById('submissionForm');\n const submitButton = document.getElementById('submitButton');\n const successMessage = document.getElementById('successMessage');\n const errorMessage = document.getElementById('errorMessage');\n \n // Magic link form\n const magicLinkForm = document.getElementById('magicLinkForm');\n const magicLinkButton = document.getElementById('magicLinkButton');\n const magicLinkSuccessMessage = document.getElementById('magicLinkSuccessMessage');\n const magicLinkErrorMessage = document.getElementById('magicLinkErrorMessage');\n \n // Handle main form submission\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n \n // Disable the submit button and show loading state\n submitButton.disabled = true;\n submitButton.innerText = 'Submitting...';\n \n // Hide any previous messages\n successMessage.classList.add('hidden');\n errorMessage.classList.add('hidden');\n \n try {\n const formData = new FormData(form);\n \n const response = await fetch('/submit', {\n method: 'POST',\n body: formData\n });\n \n const result = await response.json();\n \n if (response.ok && result.success) {\n // Show success message with the message from the server\n form.reset();\n \n // Update success message content with server response\n const messageContent = successMessage.querySelector('p:first-of-type');\n if (messageContent) {\n messageContent.textContent = result.message || 'Thank you for your submission!';\n }\n \n successMessage.classList.remove('hidden');\n \n // Scroll to the success message\n successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });\n } else {\n // Show error message\n errorMessage.textContent = result.message || 'An error occurred. Please try again.';\n errorMessage.classList.remove('hidden');\n }\n } catch (error) {\n console.error('Error submitting form:', error);\n errorMessage.textContent = 'An error occurred. Please try again.';\n errorMessage.classList.remove('hidden');\n } finally {\n // Re-enable the submit button\n submitButton.disabled = false;\n submitButton.innerText = 'Submit';\n }\n });\n \n // Handle magic link form submission\n magicLinkForm.addEventListener('submit', async (e) => {\n e.preventDefault();\n \n // Disable the button and show loading state\n magicLinkButton.disabled = true;\n magicLinkButton.innerText = 'Sending...';\n \n // Hide any previous messages\n magicLinkSuccessMessage.classList.add('hidden');\n magicLinkErrorMessage.classList.add('hidden');\n \n try {\n const email = document.getElementById('existingEmail').value;\n \n const response = await fetch('/request-magic-link', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({ email })\n });\n \n const result = await response.json();\n \n // Always show success message even if email doesn't exist (for security)\n magicLinkForm.reset();\n magicLinkSuccessMessage.classList.remove('hidden');\n \n } catch (error) {\n console.error('Error requesting magic link:', error);\n magicLinkErrorMessage.textContent = 'An error occurred. Please try again.';\n magicLinkErrorMessage.classList.remove('hidden');\n } finally {\n // Re-enable the button\n magicLinkButton.disabled = false;\n magicLinkButton.innerText = 'Send Magic Link';\n }\n });\n});",[257,280,296],{"_150":448,"_103":449,"_108":556,"_153":139,"_461":557},["D",1746642052583],[558],{"_106":446,"_153":139,"_150":448,"_99":447,"_160":452,"_158":273,"_103":451,"_152":-5,"_108":556,"_154":449,"_162":-5,"_156":120,"_161":27,"_102":559},[447],{"_150":316,"_103":122,"_108":561,"_153":139,"_461":562},["D",1746642043162],[563],{"_106":314,"_153":139,"_150":316,"_99":315,"_160":319,"_158":318,"_103":181,"_152":258,"_108":561,"_154":122,"_162":-5,"_156":120,"_161":27,"_102":564},[257,315],{"_150":316,"_103":566,"_108":567,"_153":139,"_461":568},219,["D",1746642038502],[569],{"_106":570,"_153":139,"_150":316,"_99":315,"_160":319,"_158":171,"_103":33,"_152":258,"_108":567,"_154":566,"_162":-5,"_156":27,"_161":27,"_102":571},"fa0e98ea-2b6f-11f0-a4d1-569c3dd06744",[257,315],{"_150":573,"_103":574,"_108":575,"_153":139,"_461":576},"207ec70c-2b6b-11f0-aeb9-569c3dd06744",218,["D",1746641996697],[577],{"_106":578,"_153":139,"_150":573,"_99":579,"_160":580,"_158":318,"_103":94,"_152":258,"_108":575,"_154":574,"_162":-5,"_156":120,"_161":120,"_102":581},"e12417d8-2b6f-11f0-b084-569c3dd06744","single-file-demo.html","\n\n\n \n \n Uploadcare Single File Demo\n \n \n \n \n \n \n \n \n \n \n\n\n

Uploadcare Single File Demo

Solution 1: Using individual file uploaders to avoid group issues

\n \n \n

Upload Images

\n \n

\n This demo uses multiple single file uploaders instead of one multi-file uploader.\n Each uploader will give you an individual file UUID, avoiding the group issue.\n

\n \n

\n Image 1\n \n

\n \n

\n Image 2\n \n

\n \n \n

Results

\n \n

Upload images to see results...

\n \n

Implementation Code

\n \n

// HTML\n<input \n  type=\"hidden\" \n  role=\"uploadcare-uploader\"\n  data-images-only=\"true\"\n  data-multiple=\"false\"\n  id=\"singleUploader1\"\n/>\n\n// JavaScript\nconst widget = uploadcare.Widget('#singleUploader1');\n\nwidget.onChange(function(file) {\n  if (file) {\n    file.done(function(fileInfo) {\n      console.log('File UUID:', fileInfo.uuid);\n      console.log('CDN URL:', fileInfo.cdnUrl);\n      \n      // This is always an individual file, never a group\n      saveImageToDatabase(fileInfo.uuid);\n    });\n  }\n});

\n \n \n\n",[257,579],{"_150":325,"_103":326,"_108":583,"_153":139,"_461":584},["D",1746641992456],[585],{"_106":323,"_153":139,"_150":325,"_99":324,"_160":328,"_158":318,"_103":181,"_152":258,"_108":583,"_154":326,"_162":-5,"_156":120,"_161":27,"_102":586},[257,324],{"_150":325,"_103":588,"_108":589,"_153":139,"_461":590},216,["D",1746641988066],[591],{"_106":592,"_153":139,"_150":325,"_99":324,"_160":328,"_158":171,"_103":33,"_152":258,"_108":589,"_154":588,"_162":-5,"_156":27,"_161":27,"_102":593},"dbfe61d2-2b6f-11f0-938f-569c3dd06744",[257,324],{"_150":595,"_103":596,"_108":597,"_153":139,"_461":598},"0816b45a-2b6a-11f0-a816-569c3dd06744",215,["D",1746641940551],[599],{"_106":600,"_153":139,"_150":595,"_99":601,"_160":602,"_158":318,"_103":94,"_152":258,"_108":597,"_154":596,"_162":-5,"_156":120,"_161":120,"_102":603},"bfacd0ae-2b6f-11f0-858c-569c3dd06744","uploadcare-demo.html","\n\n\n \n \n Uploadcare Individual Files Demo\n \n \n \n\n\n

Uploadcare Individual Files Demo

\n \n

Upload Images

\n \n

Problem: Group Uploads

\n \n

\n Multi-file upload (creates groups):\n \n

\n \n

Solution 1: Individual File Uploads

\n Use separate widgets for each file upload to get individual file UUIDs.\n

\n \n

\n Image 1:\n \n

\n Image 2:\n \n

\n Image 3:\n \n

\n \n

Solution 2: Process Group Files Individually

\n If you need to use the multi-file uploader, you can extract individual files from the group.\n

\n \n

\n Multi-file upload (with individual file handling):\n \n

\n \n

Results

\n \n

Group Upload Result

Upload files to see results...

\n \n

Individual Files Result

Upload files to see results...

\n \n

Smart Group Handling Result

Upload files to see results...

\n \n

\n\n \n\n",[257,601],{"_150":334,"_103":335,"_108":605,"_153":139,"_461":606},["D",1746641936924],[607],{"_106":332,"_153":139,"_150":334,"_99":333,"_160":337,"_158":318,"_103":181,"_152":258,"_108":605,"_154":335,"_162":-5,"_156":120,"_161":27,"_102":608},[257,333],{"_150":334,"_103":610,"_108":611,"_153":139,"_461":612},213,["D",1746641932989],[613],{"_106":614,"_153":139,"_150":334,"_99":333,"_160":337,"_158":171,"_103":33,"_152":258,"_108":611,"_154":610,"_162":-5,"_156":27,"_161":27,"_102":615},"bb2a40de-2b6f-11f0-a30d-569c3dd06744",[257,333],{"_150":617,"_103":618,"_108":619,"_153":139,"_461":620},"3430bc7a-2b6a-11f0-ad07-569c3dd06744",212,["D",1746641883568],[621],{"_106":622,"_153":139,"_150":617,"_99":623,"_160":624,"_158":318,"_103":94,"_152":258,"_108":619,"_154":618,"_162":-5,"_156":120,"_161":120,"_102":625},"9db64282-2b6f-11f0-9cdc-569c3dd06744","uploadcare-fix.html","\n\n\n \n \n Uploadcare Group Fix\n \n \n \n\n\n

Uploadcare Group Fix

A solution for handling Uploadcare group uploads properly

\n \n

The Problem

\n \n

\n When using Uploadcare's multi-file uploader, files are grouped together with a UUID like:\n cb08730c-9c8b-46bb-a79e-9ab0f228939e~1\n

\n \n

\n To access individual files, you need to use the /nth/0/ syntax,\n which can be cumbersome and doesn't give you direct access to individual file UUIDs.\n

\n \n

Solution 1: Single File Uploads

\n \n

\n Use individual file uploaders to get separate file UUIDs:\n

\n \n

Upload a file to see the result...

\n \n

Solution 2: Extract from Group

\n \n

\n Use the multi-file uploader but extract individual file UUIDs:\n

\n \n

Upload files to see the result...

\n \n

Extracted Files

\n \n

Upload files using Solution 2 to see extracted files...

\n \n

Implementation Guide

\n \n

JavaScript Code

\n \n

// Extract individual files from a group\nuploadcareWidget.onChange(function(file) {\n  if (file) {\n    file.done(function(fileInfo) {\n      if (fileInfo.isGroup) {\n        // Load the group info to get individual files\n        fileInfo.files().done(function(files) {\n          files.forEach(file => {\n            console.log('Individual file UUID:', file.uuid);\n            console.log('Individual file URL:', file.cdnUrl);\n            \n            // Use these individual files instead of the group\n            saveImageToDatabase(file.uuid);\n          });\n        });\n      } else {\n        // Handle single file upload\n        console.log('Single file UUID:', fileInfo.uuid);\n        saveImageToDatabase(fileInfo.uuid);\n      }\n    });\n  }\n});

\n \n

Backend API Example

\n \n

// Register individual files instead of groups\napp.post(\"/register-image\", async (c) => {\n  const { uploadcareUuid, submissionId } = await c.req.json();\n  \n  // Check if this is a group UUID (contains ~)\n  if (uploadcareUuid.includes('~')) {\n    // Get group info and extract individual files\n    const groupInfo = await getGroupInfo(uploadcareUuid);\n    \n    // Register each file individually\n    const registeredFiles = [];\n    for (const file of groupInfo.files) {\n      const result = await registerSingleFile(file.uuid, submissionId);\n      registeredFiles.push(result);\n    }\n    \n    return c.json({ success: true, files: registeredFiles });\n  } else {\n    // Register single file\n    const result = await registerSingleFile(uploadcareUuid, submissionId);\n    return c.json({ success: true, file: result });\n  }\n});

\n\n \n\n",[257,623],{"_150":448,"_103":627,"_108":628,"_153":139,"_461":629},211,["D",1746640623765],[630],{"_106":631,"_153":139,"_150":448,"_99":447,"_160":632,"_158":273,"_103":633,"_152":-5,"_108":628,"_154":627,"_162":-5,"_156":27,"_161":27,"_102":634},"aecf5124-2b6c-11f0-ae2e-569c3dd06744","# LauraMepson Landing Page\n\nA landing page application that collects company information and allows users to add additional details through email links.\n\n## Features\n\n- Simple landing page with LauraMepson branding\n- Form to collect company name and email\n- SQLite database storage for submissions\n- Email functionality to send users a unique link\n- Continuation page for adding more information\n- Image upload and storage using Uploadcare\n\n## Uploadcare Group Fix\n\nThis project includes solutions for handling Uploadcare image uploads, specifically addressing the issue where multi-file uploads create groups instead of individual files.\n\n### The Problem\n\nWhen using Uploadcare's multi-file uploader, files are grouped together with a UUID like:\n`cb08730c-9c8b-46bb-a79e-9ab0f228939e~1`\n\nTo access individual files, you need to use the `/nth/0/` syntax, which can be cumbersome and doesn't give you direct access to individual file UUIDs.\n\n### Solutions\n\nTwo solutions are provided:\n\n1. **Use Single File Uploaders**: Configure Uploadcare widgets to upload one file at a time\n2. **Extract Individual Files from Groups**: Use the multi-file uploader but extract individual file UUIDs\n\n### Demo Pages\n\n- `/public/uploadcare-demo.html` - A comprehensive demo showing both problems and solutions\n- `/public/uploadcare-fix.html` - A focused solution with implementation guide\n- `/public/single-file-demo.html` - A demo of the single file uploader solution\n\n### Implementation\n\nThe single file uploader solution has been implemented in the main application:\n\n1. Changed `UPLOADCARE_MULTIPLE` to `false` in the global configuration\n2. Implemented a clean UI with a single uploader and \"Add Another Image\" button\n3. Updated the JavaScript to handle individual file uploads\n4. Added a helper script (`/public/js/uploadcare-helper.js`) with utility functions\n\n## Project Structure\n\n```\n├── api/ # API route handlers\n│ ├── images.ts # Image-related API endpoints\n│ ├── submissions.ts # Submission-related API endpoints\n│ └── index.ts # API routes configuration\n├── controllers/ # Request handling logic\n│ ├── imageController.ts # Image upload/retrieval logic\n│ └── submissionController.ts # Submission handling logic\n├── models/ # Data models and types\n│ ├── image.ts # Image-related types\n│ └── submission.ts # Submission-related types\n├── services/ # Business logic\n│ ├── imageService.ts # Image metadata operations\n│ ├── uploadcareService.ts # Uploadcare integration\n│ ├── databaseService.ts # Database operations\n│ ├── emailService.ts # Email sending functionality\n│ └── templateService.ts # HTML template rendering\n├── utils/ # Utility functions\n│ ├── helpers.ts # Helper functions\n│ └── responseUtils.ts # Standardized API responses\n├── views/ # HTML templates\n│ ├── landing.html # Main landing page\n│ └── continue.html # Continuation page\n├── public/ # Static assets and client-side JS\n│ ├── css/ # Stylesheets\n│ │ └── styles.css # Common styles\n│ └── js/ # Client-side JavaScript\n│ ├── landing.js # Landing page script\n│ └── continue.js # Continuation page script\n└── index.ts # Main entry point\n```\n\n## Database Schema\n\nThe application uses a SQLite database with the following schemas:\n\n### Submissions Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n### Images Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_images_v1 (\n id TEXT PRIMARY KEY,\n original_name TEXT NOT NULL,\n content_type TEXT NOT NULL,\n size INTEGER NOT NULL,\n uploaded_at TEXT NOT NULL,\n submission_id TEXT NOT NULL,\n cdn_url TEXT NOT NULL\n)\n```\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Uploadcare:\n- Uploadcare handles file uploads, storage, and CDN delivery\n- Uploadcare's built-in image preview and cropping tools are used\n- Image metadata is stored in our SQLite database\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Environment Variables\n\n- `UPLOADCARE_SECRET_KEY`: Secret key for Uploadcare API authentication\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `emailService.ts`\n- The unique ID generation is handled in `utils/helpers.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing\n\n## Database Schema\n\nThe application uses a SQLite database with the following schema:\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Val Town's blob storage:\n- Images are stored with a unique ID\n- Metadata is stored alongside each image\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `email.ts`\n- The unique ID generation is handled in `utils.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing",9,[447],{"_150":428,"_103":429,"_108":636,"_153":139,"_461":637},["D",1746640617486],[638],{"_106":426,"_153":139,"_150":428,"_99":427,"_160":432,"_158":273,"_103":431,"_152":422,"_108":636,"_154":429,"_162":-5,"_156":120,"_161":27,"_102":639},[421,427],{"_150":287,"_103":288,"_108":641,"_153":139,"_461":642},["D",1746640605219],[643],{"_106":285,"_153":139,"_150":287,"_99":286,"_160":291,"_158":171,"_103":290,"_152":281,"_108":641,"_154":288,"_162":-5,"_156":120,"_161":27,"_102":644},[257,280,286],{"_150":287,"_103":646,"_108":647,"_153":139,"_461":648},208,["D",1746640597688],[649],{"_106":650,"_153":139,"_150":287,"_99":286,"_160":651,"_158":171,"_103":652,"_152":281,"_108":647,"_154":646,"_162":-5,"_156":27,"_161":27,"_102":653},"9f440c22-2b6c-11f0-8681-569c3dd06744","document.addEventListener('DOMContentLoaded', () => {\n const form = document.getElementById('additionalInfoForm');\n const submitButton = document.getElementById('submitButton');\n const successMessage = document.getElementById('successMessage');\n const errorMessage = document.getElementById('errorMessage');\n const submissionId = document.getElementById('submissionId').value;\n const imageCount = document.getElementById('imageCount');\n const uploadStatusElement = document.getElementById('uploadStatus');\n const fileListContainer = document.getElementById('uploadcare-gallery');\n \n // Initialize Uploadcare with single file uploader\n function initUploadcare() {\n try {\n console.log('Initializing Uploadcare widget with single file uploader');\n \n // Check if Uploadcare is loaded\n if (typeof uploadcare === 'undefined') {\n console.error('ERROR: Uploadcare library is not loaded!');\n uploadStatusElement.textContent = 'Upload widget failed to load';\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n return;\n }\n \n console.log('Uploadcare library loaded successfully', { version: uploadcare.version });\n \n // Initialize the main uploader\n const widget = uploadcare.Widget('#uploadcareFile');\n console.log('Widget initialized:', widget);\n \n // Track upload progress\n widget.onChange(function(file) {\n console.log('Widget onChange event triggered', { file });\n if (!file) {\n uploadStatusElement.textContent = '';\n return;\n }\n \n uploadStatusElement.textContent = 'Preparing file...';\n uploadStatusElement.className = 'mt-2 text-sm text-blue-500';\n \n // Handle file upload\n file.progress(info => {\n console.log('Upload progress:', info);\n uploadStatusElement.textContent = `Uploading: ${Math.round(info.progress * 100)}%`;\n });\n \n file.done(fileInfo => {\n console.log('Upload completed:', fileInfo);\n uploadStatusElement.textContent = 'Processing...';\n \n // Register the individual file\n registerUploadcareFile(fileInfo.uuid)\n .then(() => {\n // Show the \"Add Another Image\" button after successful upload\n document.getElementById('addMoreContainer').classList.remove('hidden');\n });\n });\n \n file.fail(error => {\n console.error('Upload failed:', error);\n uploadStatusElement.textContent = 'Upload failed';\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n });\n });\n \n // Set up the \"Add Another Image\" button\n const addMoreButton = document.getElementById('addMoreButton');\n if (addMoreButton) {\n addMoreButton.addEventListener('click', function() {\n // Reset the widget to allow uploading another file\n widget.value(null);\n \n // Focus on the widget to open the file picker\n setTimeout(() => {\n const widgetButton = document.querySelector('.uploadcare--widget__button');\n if (widgetButton) {\n widgetButton.click();\n }\n }, 100);\n });\n }\n \n // Load existing images for this submission\n loadImages();\n \n } catch (error) {\n console.error('Error initializing Uploadcare:', error);\n uploadStatusElement.textContent = 'Error initializing upload widget';\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n throw error; // Re-throw to see the full error\n }\n }\n \n // Register an Uploadcare file group with our server\n async function registerUploadcareGroup(groupId) {\n try {\n console.log(`Registering file group with server: ${groupId}`);\n uploadStatusElement.textContent = 'Registering image group with server...';\n \n const response = await fetch('/register-image-group', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n uploadcareGroupId: groupId,\n submissionId: submissionId\n })\n });\n \n console.log(`Server response status: ${response.status} ${response.statusText}`);\n \n // Try to parse the response as JSON\n let result;\n try {\n result = await response.json();\n console.log('Server response:', result);\n } catch (parseError) {\n // If we can't parse as JSON, get the text\n const errorText = await response.text();\n console.error('Error parsing server response:', parseError);\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n uploadStatusElement.textContent = 'Images uploaded successfully!';\n uploadStatusElement.className = 'mt-2 text-sm text-green-500';\n \n // Refresh the images list\n loadImages();\n } else {\n const errorMessage = result.message || 'Failed to register image group';\n console.error('Server error:', errorMessage);\n \n // Check for database schema errors\n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n \n uploadStatusElement.innerHTML = `\n Database schema error. Please try refreshing the page.\n \n `;\n \n // Add click handler for the refresh button\n document.getElementById('refreshPageBtn').addEventListener('click', () => {\n window.location.reload();\n });\n } else {\n uploadStatusElement.textContent = errorMessage;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n } catch (error) {\n console.error('Error registering Uploadcare file group:', error);\n uploadStatusElement.textContent = `Error: ${error.message}`;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n \n // Register a single Uploadcare file with our server\n async function registerUploadcareFile(uuid) {\n try {\n console.log(`Registering file with server: ${uuid}`);\n uploadStatusElement.textContent = 'Registering image with server...';\n \n const response = await fetch('/register-image', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n uploadcareUuid: uuid,\n submissionId: submissionId\n })\n });\n \n console.log(`Server response status: ${response.status} ${response.statusText}`);\n \n // Try to parse the response as JSON\n let result;\n try {\n result = await response.json();\n console.log('Server response:', result);\n } catch (parseError) {\n // If we can't parse as JSON, get the text\n const errorText = await response.text();\n console.error('Error parsing server response:', parseError);\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n uploadStatusElement.textContent = 'Image uploaded successfully!';\n uploadStatusElement.className = 'mt-2 text-sm text-green-500';\n \n // Refresh the images list\n loadImages();\n } else {\n const errorMessage = result.message || 'Failed to register image';\n console.error('Server error:', errorMessage);\n \n // Check for database schema errors\n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n \n uploadStatusElement.innerHTML = `\n Database schema error. Please try refreshing the page.\n \n `;\n \n // Add click handler for the refresh button\n document.getElementById('refreshPageBtn').addEventListener('click', () => {\n window.location.reload();\n });\n } else {\n uploadStatusElement.textContent = errorMessage;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n } catch (error) {\n console.error('Error registering Uploadcare file:', error);\n uploadStatusElement.textContent = `Error: ${error.message}`;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n \n // Load images for this submission using Uploadcare's API\n async function loadImages() {\n try {\n console.log(`Loading images for submission ID: ${submissionId}`);\n \n const response = await fetch(`/list-images?submissionId=${submissionId}`);\n \n if (!response.ok) {\n console.error(`Error loading images: ${response.status} ${response.statusText}`);\n throw new Error(`Failed to load images: ${response.status} ${response.statusText}`);\n }\n \n const result = await response.json();\n console.log('Image list response:', result);\n \n if (result.success) {\n const images = result.data;\n \n // Update image count display\n imageCount.textContent = `${images.length} image${images.length !== 1 ? 's' : ''}`;\n \n // Render the images using Uploadcare's UI\n if (images.length > 0) {\n renderUploadcareGallery(images);\n } else {\n // Clear the file list container\n fileListContainer.innerHTML = '

No images uploaded yet

LauraMepson

Ad Portal

\n \n \n

\n 👤\n

Account Information

\n \n

\n Company: {{COMPANY_NAME}}
\n Email: {{EMAIL}}
\n Your Unique Link: https://{{HOST}}/?action=continue&id={{ID}}\n

\n Save this link to access your ad portal later.\n

\n \n

\n \n \n \n

\n 🏢\n

Image Gallery

\n \n

Upload images to use in your ads. These images will be available to select when creating new ads.

\n \n \n

\n \n

\n \n \n

\n \n

\n \n \n

Your Images

\n \n \n

\n 0 images\n

\n \n \n

\n 📢\n

Ad Creation

\n \n

Create and manage your ads. Select images from your gallery to use in your ads.

\n \n \n

Ad creation tools coming soon!

You'll be able to create ads and select images from your gallery.

\n \n \n

\n \n

\n Your information has been saved successfully!\n

\n \n

\n \n \n\n \n \n\n",20,[421,427],{"_150":448,"_103":664,"_108":665,"_153":139,"_461":666},206,["D",1746639976851],[667],{"_106":668,"_153":139,"_150":448,"_99":447,"_160":669,"_158":273,"_103":670,"_152":-5,"_108":665,"_154":664,"_162":-5,"_156":27,"_161":27,"_102":671},"2d37836c-2b6b-11f0-acdc-569c3dd06744","# LauraMepson Landing Page\n\nA landing page application that collects company information and allows users to add additional details through email links.\n\n## Features\n\n- Simple landing page with LauraMepson branding\n- Form to collect company name and email\n- SQLite database storage for submissions\n- Email functionality to send users a unique link\n- Continuation page for adding more information\n- Image upload and storage using Uploadcare\n\n## Uploadcare Group Fix\n\nThis project includes solutions for handling Uploadcare image uploads, specifically addressing the issue where multi-file uploads create groups instead of individual files.\n\n### The Problem\n\nWhen using Uploadcare's multi-file uploader, files are grouped together with a UUID like:\n`cb08730c-9c8b-46bb-a79e-9ab0f228939e~1`\n\nTo access individual files, you need to use the `/nth/0/` syntax, which can be cumbersome and doesn't give you direct access to individual file UUIDs.\n\n### Solutions\n\nTwo solutions are provided:\n\n1. **Use Single File Uploaders**: Configure Uploadcare widgets to upload one file at a time\n2. **Extract Individual Files from Groups**: Use the multi-file uploader but extract individual file UUIDs\n\n### Demo Pages\n\n- `/public/uploadcare-demo.html` - A comprehensive demo showing both problems and solutions\n- `/public/uploadcare-fix.html` - A focused solution with implementation guide\n- `/public/single-file-demo.html` - A demo of the single file uploader solution\n\n### Implementation\n\nThe single file uploader solution has been implemented in the main application:\n\n1. Changed `UPLOADCARE_MULTIPLE` to `false` in the global configuration\n2. Replaced the multi-file uploader with multiple single file uploaders\n3. Updated the JavaScript to handle individual file uploads\n4. Added a helper script (`/public/js/uploadcare-helper.js`) with utility functions\n\n## Project Structure\n\n```\n├── api/ # API route handlers\n│ ├── images.ts # Image-related API endpoints\n│ ├── submissions.ts # Submission-related API endpoints\n│ └── index.ts # API routes configuration\n├── controllers/ # Request handling logic\n│ ├── imageController.ts # Image upload/retrieval logic\n│ └── submissionController.ts # Submission handling logic\n├── models/ # Data models and types\n│ ├── image.ts # Image-related types\n│ └── submission.ts # Submission-related types\n├── services/ # Business logic\n│ ├── imageService.ts # Image metadata operations\n│ ├── uploadcareService.ts # Uploadcare integration\n│ ├── databaseService.ts # Database operations\n│ ├── emailService.ts # Email sending functionality\n│ └── templateService.ts # HTML template rendering\n├── utils/ # Utility functions\n│ ├── helpers.ts # Helper functions\n│ └── responseUtils.ts # Standardized API responses\n├── views/ # HTML templates\n│ ├── landing.html # Main landing page\n│ └── continue.html # Continuation page\n├── public/ # Static assets and client-side JS\n│ ├── css/ # Stylesheets\n│ │ └── styles.css # Common styles\n│ └── js/ # Client-side JavaScript\n│ ├── landing.js # Landing page script\n│ └── continue.js # Continuation page script\n└── index.ts # Main entry point\n```\n\n## Database Schema\n\nThe application uses a SQLite database with the following schemas:\n\n### Submissions Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n### Images Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_images_v1 (\n id TEXT PRIMARY KEY,\n original_name TEXT NOT NULL,\n content_type TEXT NOT NULL,\n size INTEGER NOT NULL,\n uploaded_at TEXT NOT NULL,\n submission_id TEXT NOT NULL,\n cdn_url TEXT NOT NULL\n)\n```\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Uploadcare:\n- Uploadcare handles file uploads, storage, and CDN delivery\n- Uploadcare's built-in image preview and cropping tools are used\n- Image metadata is stored in our SQLite database\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Environment Variables\n\n- `UPLOADCARE_SECRET_KEY`: Secret key for Uploadcare API authentication\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `emailService.ts`\n- The unique ID generation is handled in `utils/helpers.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing\n\n## Database Schema\n\nThe application uses a SQLite database with the following schema:\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Val Town's blob storage:\n- Images are stored with a unique ID\n- Metadata is stored alongside each image\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `email.ts`\n- The unique ID generation is handled in `utils.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing",8,[447],{"_150":573,"_103":673,"_108":674,"_153":139,"_461":675},205,["D",1746639959936],[676],{"_106":677,"_153":139,"_150":573,"_99":579,"_160":580,"_158":318,"_103":181,"_152":258,"_108":674,"_154":673,"_162":-5,"_156":27,"_161":27,"_102":678},"2323a22a-2b6b-11f0-885d-569c3dd06744",[257,579],{"_150":573,"_103":680,"_108":681,"_153":139,"_461":682},204,["D",1746639955459],[683],{"_106":684,"_153":139,"_150":573,"_99":579,"_160":580,"_158":273,"_103":33,"_152":258,"_108":681,"_154":680,"_162":-5,"_156":27,"_161":27,"_102":685},"207ec63a-2b6b-11f0-aeb9-569c3dd06744",[257,579],{"_150":428,"_103":687,"_108":688,"_153":139,"_461":689},203,["D",1746639913326],[690],{"_106":691,"_153":139,"_150":428,"_99":427,"_160":692,"_158":273,"_103":693,"_152":422,"_108":688,"_154":687,"_162":-5,"_156":27,"_161":27,"_102":694},"075a9864-2b6b-11f0-b6ed-569c3dd06744","\n\n\n \n \n Ad Portal - LauraMepson\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

LauraMepson

Ad Portal

\n \n \n

\n 👤\n

Account Information

\n \n

\n Company: {{COMPANY_NAME}}
\n Email: {{EMAIL}}
\n Your Unique Link: https://{{HOST}}/?action=continue&id={{ID}}\n

\n Save this link to access your ad portal later.\n

\n \n

\n \n \n \n

\n 🏢\n

Image Gallery

\n \n

Upload images to use in your ads. These images will be available to select when creating new ads.

\n \n \n

\n \n

\n \n \n

\n \n

\n \n \n

Your Images

\n \n \n

\n 0 images\n

\n \n \n

\n 📢\n

Ad Creation

\n \n

Create and manage your ads. Select images from your gallery to use in your ads.

\n \n \n

Ad creation tools coming soon!

You'll be able to create ads and select images from your gallery.

\n \n \n

\n \n

\n Your information has been saved successfully!\n

\n \n

\n \n \n\n \n \n\n",19,[421,427],{"_150":306,"_103":307,"_108":696,"_153":139,"_461":697},["D",1746639906566],[698],{"_106":304,"_153":139,"_150":306,"_99":305,"_160":309,"_158":171,"_103":33,"_152":281,"_108":696,"_154":307,"_162":-5,"_156":120,"_161":27,"_102":699},[257,280,305],{"_150":287,"_103":701,"_108":702,"_153":139,"_461":703},201,["D",1746639883655],[704],{"_106":705,"_153":139,"_150":287,"_99":286,"_160":706,"_158":171,"_103":707,"_152":281,"_108":702,"_154":701,"_162":-5,"_156":27,"_161":27,"_102":708},"f5bfc6f6-2b6a-11f0-9f27-569c3dd06744","document.addEventListener('DOMContentLoaded', () => {\n const form = document.getElementById('additionalInfoForm');\n const submitButton = document.getElementById('submitButton');\n const successMessage = document.getElementById('successMessage');\n const errorMessage = document.getElementById('errorMessage');\n const submissionId = document.getElementById('submissionId').value;\n const imageCount = document.getElementById('imageCount');\n const uploadStatusElement = document.getElementById('uploadStatus');\n const fileListContainer = document.getElementById('uploadcare-gallery');\n \n // Initialize Uploadcare with single file uploaders\n function initUploadcare() {\n try {\n console.log('Initializing Uploadcare widgets with single file uploaders');\n \n // Check if Uploadcare is loaded\n if (typeof uploadcare === 'undefined') {\n console.error('ERROR: Uploadcare library is not loaded!');\n uploadStatusElement.textContent = 'Upload widget failed to load';\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n return;\n }\n \n console.log('Uploadcare library loaded successfully', { version: uploadcare.version });\n \n // Initialize all single file uploaders\n const uploaderIds = ['uploadcareFile', 'uploadcareFile1', 'uploadcareFile2', 'uploadcareFile3'];\n \n uploaderIds.forEach(id => {\n const widget = uploadcare.Widget(`#${id}`);\n console.log(`Widget initialized: ${id}`, widget);\n \n // Track upload progress for each widget\n widget.onChange(function(file) {\n console.log(`Widget ${id} onChange event triggered`, { file });\n if (!file) {\n return;\n }\n \n uploadStatusElement.textContent = 'Preparing file...';\n uploadStatusElement.className = 'mt-2 text-sm text-blue-500';\n \n // Handle file upload\n file.progress(info => {\n console.log('Upload progress:', info);\n uploadStatusElement.textContent = `Uploading: ${Math.round(info.progress * 100)}%`;\n });\n \n file.done(fileInfo => {\n console.log('Upload completed:', fileInfo);\n uploadStatusElement.textContent = 'Processing...';\n \n // Register the individual file\n registerUploadcareFile(fileInfo.uuid);\n });\n \n file.fail(error => {\n console.error('Upload failed:', error);\n uploadStatusElement.textContent = 'Upload failed';\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n });\n });\n });\n \n // Load existing images for this submission\n loadImages();\n \n } catch (error) {\n console.error('Error initializing Uploadcare:', error);\n uploadStatusElement.textContent = 'Error initializing upload widget';\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n throw error; // Re-throw to see the full error\n }\n }\n \n // Register an Uploadcare file group with our server\n async function registerUploadcareGroup(groupId) {\n try {\n console.log(`Registering file group with server: ${groupId}`);\n uploadStatusElement.textContent = 'Registering image group with server...';\n \n const response = await fetch('/register-image-group', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n uploadcareGroupId: groupId,\n submissionId: submissionId\n })\n });\n \n console.log(`Server response status: ${response.status} ${response.statusText}`);\n \n // Try to parse the response as JSON\n let result;\n try {\n result = await response.json();\n console.log('Server response:', result);\n } catch (parseError) {\n // If we can't parse as JSON, get the text\n const errorText = await response.text();\n console.error('Error parsing server response:', parseError);\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n uploadStatusElement.textContent = 'Images uploaded successfully!';\n uploadStatusElement.className = 'mt-2 text-sm text-green-500';\n \n // Refresh the images list\n loadImages();\n } else {\n const errorMessage = result.message || 'Failed to register image group';\n console.error('Server error:', errorMessage);\n \n // Check for database schema errors\n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n \n uploadStatusElement.innerHTML = `\n Database schema error. Please try refreshing the page.\n \n `;\n \n // Add click handler for the refresh button\n document.getElementById('refreshPageBtn').addEventListener('click', () => {\n window.location.reload();\n });\n } else {\n uploadStatusElement.textContent = errorMessage;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n } catch (error) {\n console.error('Error registering Uploadcare file group:', error);\n uploadStatusElement.textContent = `Error: ${error.message}`;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n \n // Register a single Uploadcare file with our server\n async function registerUploadcareFile(uuid) {\n try {\n console.log(`Registering file with server: ${uuid}`);\n uploadStatusElement.textContent = 'Registering image with server...';\n \n const response = await fetch('/register-image', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n uploadcareUuid: uuid,\n submissionId: submissionId\n })\n });\n \n console.log(`Server response status: ${response.status} ${response.statusText}`);\n \n // Try to parse the response as JSON\n let result;\n try {\n result = await response.json();\n console.log('Server response:', result);\n } catch (parseError) {\n // If we can't parse as JSON, get the text\n const errorText = await response.text();\n console.error('Error parsing server response:', parseError);\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n uploadStatusElement.textContent = 'Image uploaded successfully!';\n uploadStatusElement.className = 'mt-2 text-sm text-green-500';\n \n // Refresh the images list\n loadImages();\n } else {\n const errorMessage = result.message || 'Failed to register image';\n console.error('Server error:', errorMessage);\n \n // Check for database schema errors\n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n \n uploadStatusElement.innerHTML = `\n Database schema error. Please try refreshing the page.\n \n `;\n \n // Add click handler for the refresh button\n document.getElementById('refreshPageBtn').addEventListener('click', () => {\n window.location.reload();\n });\n } else {\n uploadStatusElement.textContent = errorMessage;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n } catch (error) {\n console.error('Error registering Uploadcare file:', error);\n uploadStatusElement.textContent = `Error: ${error.message}`;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n \n // Load images for this submission using Uploadcare's API\n async function loadImages() {\n try {\n console.log(`Loading images for submission ID: ${submissionId}`);\n \n const response = await fetch(`/list-images?submissionId=${submissionId}`);\n \n if (!response.ok) {\n console.error(`Error loading images: ${response.status} ${response.statusText}`);\n throw new Error(`Failed to load images: ${response.status} ${response.statusText}`);\n }\n \n const result = await response.json();\n console.log('Image list response:', result);\n \n if (result.success) {\n const images = result.data;\n \n // Update image count display\n imageCount.textContent = `${images.length} image${images.length !== 1 ? 's' : ''}`;\n \n // Render the images using Uploadcare's UI\n if (images.length > 0) {\n renderUploadcareGallery(images);\n } else {\n // Clear the file list container\n fileListContainer.innerHTML = '

No images uploaded yet

';\n }\n } else {\n throw new Error(result.message || 'Error loading images');\n }\n } catch (error) {\n console.error('Error loading images:', error);\n uploadStatusElement.textContent = `Error: ${error.message}`;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n throw error; // Re-throw to see the full error\n }\n }\n \n // Render images using Uploadcare's File Uploader UI\n function renderUploadcareGallery(images) {\n console.log('Rendering Uploadcare gallery with images:', images);\n \n // Get the container element\n const galleryContainer = document.getElementById('uploadcare-gallery');\n \n if (!galleryContainer) {\n console.error('ERROR: Gallery container element not found!');\n return;\n }\n \n // Clear the container\n galleryContainer.innerHTML = '';\n \n // Create a container for the File Uploader UI\n const fileUploaderContainer = document.createElement('div');\n fileUploaderContainer.className = 'uploadcare--file-uploader-ui';\n galleryContainer.appendChild(fileUploaderContainer);\n \n // Create the file list\n const fileList = document.createElement('div');\n fileList.className = 'uploadcare--file-list';\n fileUploaderContainer.appendChild(fileList);\n \n // Add each image to the file list\n images.forEach(image => {\n // Create the file item\n const fileItem = document.createElement('div');\n fileItem.className = 'uploadcare--file';\n fileItem.dataset.fileId = image.id;\n \n // Create the file info\n const fileInfo = document.createElement('div');\n fileInfo.className = 'uploadcare--file__info';\n \n // Create the file preview\n const filePreview = document.createElement('div');\n filePreview.className = 'uploadcare--file__preview';\n const previewImg = document.createElement('img');\n previewImg.src = `${image.cdnUrl}-/preview/76x76/-/setfill/ffffff/-/format/jpeg/-/progressive/yes/`;\n previewImg.alt = 'Preview';\n filePreview.appendChild(previewImg);\n \n // Create the file name\n const fileName = document.createElement('div');\n fileName.className = 'uploadcare--file__name';\n fileName.textContent = image.originalName || image.id;\n \n // Create the file size\n const fileSize = document.createElement('div');\n fileSize.className = 'uploadcare--file__size';\n fileSize.textContent = image.size ? formatFileSize(image.size) : 'Uploaded';\n \n // Create the file actions\n const fileActions = document.createElement('div');\n fileActions.className = 'uploadcare--file__actions';\n \n // Create the view button\n const viewButton = document.createElement('button');\n viewButton.className = 'uploadcare--button uploadcare--button_icon uploadcare--button_muted';\n viewButton.type = 'button';\n viewButton.title = 'View image';\n viewButton.innerHTML = '';\n viewButton.addEventListener('click', () => {\n window.open(image.cdnUrl, '_blank');\n });\n \n // Create the remove button\n const removeButton = document.createElement('button');\n removeButton.className = 'uploadcare--button uploadcare--button_icon uploadcare--button_muted uploadcare--file__remove';\n removeButton.type = 'button';\n removeButton.title = 'Delete image';\n removeButton.innerHTML = '';\n removeButton.addEventListener('click', () => {\n if (confirm('Are you sure you want to delete this image?')) {\n deleteImage(image.id);\n }\n });\n \n // Assemble the file item\n fileActions.appendChild(viewButton);\n fileActions.appendChild(removeButton);\n fileInfo.appendChild(filePreview);\n fileInfo.appendChild(fileName);\n fileInfo.appendChild(fileSize);\n fileItem.appendChild(fileInfo);\n fileItem.appendChild(fileActions);\n fileList.appendChild(fileItem);\n });\n \n // Add SVG icons for Uploadcare UI\n if (!document.getElementById('uploadcare--icons')) {\n const icons = document.createElement('div');\n icons.id = 'uploadcare--icons';\n icons.style.display = 'none';\n icons.innerHTML = `\n \n `;\n document.body.appendChild(icons);\n }\n }\n \n // Delete an image using Uploadcare's API\n async function deleteImage(imageId) {\n try {\n console.log(`Deleting image: ${imageId}`);\n \n // Show loading state in the gallery\n const galleryContainer = document.getElementById('uploadcare-gallery');\n if (galleryContainer) {\n galleryContainer.style.opacity = '0.7';\n }\n \n const response = await fetch('/image', {\n method: 'DELETE',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n imageId,\n submissionId\n })\n });\n \n console.log(`Delete response status: ${response.status} ${response.statusText}`);\n \n let result;\n try {\n result = await response.json();\n console.log('Delete response:', result);\n } catch (parseError) {\n console.error('Error parsing delete response:', parseError);\n const errorText = await response.text();\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n // Refresh the gallery after deletion\n loadImages();\n } else {\n // Check for database schema errors\n const errorMessage = result.message || 'Failed to delete image';\n console.error('Delete error:', errorMessage);\n \n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n \n alert(`Database schema error. Please refresh the page and try again.`);\n \n } else {\n alert(errorMessage);\n }\n }\n } catch (error) {\n console.error('Error deleting image:', error);\n alert(`An error occurred while deleting the image: ${error.message}`);\n } finally {\n // Reset gallery opacity\n const galleryContainer = document.getElementById('uploadcare-gallery');\n if (galleryContainer) {\n galleryContainer.style.opacity = '1';\n }\n }\n }\n \n // Handle form submission\n form.addEventListener('submit', async (e) => {\n e.preventDefault();\n \n // Disable the submit button and show loading state\n submitButton.disabled = true;\n submitButton.innerText = 'Saving...';\n \n // Hide any previous messages\n successMessage.classList.add('hidden');\n errorMessage.classList.add('hidden');\n \n try {\n const formData = new FormData(form);\n const formDataObj = {};\n \n // Convert FormData to object\n for (const [key, value] of formData.entries()) {\n if (key !== 'submissionId' && value) {\n formDataObj[key] = value;\n }\n }\n \n // Add the ID to the form data\n formDataObj.id = submissionId;\n \n // Include the Uploadcare file IDs if available\n const uploadcareFileIds = [];\n \n // Check all single file uploaders\n const uploaderIds = ['uploadcareFile', 'uploadcareFile1', 'uploadcareFile2', 'uploadcareFile3'];\n \n uploaderIds.forEach(id => {\n const widget = uploadcare.Widget(`#${id}`);\n const file = widget.value();\n \n if (file) {\n try {\n // Get the UUID from the file\n file.done(fileInfo => {\n if (fileInfo && fileInfo.uuid) {\n uploadcareFileIds.push(fileInfo.uuid);\n console.log(`Added file ID to collection: ${fileInfo.uuid}`);\n }\n });\n } catch (e) {\n console.error(`Error getting file UUID for ${id}:`, e);\n }\n }\n });\n \n const response = await fetch(`/update`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(formDataObj)\n });\n \n const result = await response.json();\n \n if (response.ok && result.success) {\n // Show success message\n successMessage.classList.remove('hidden');\n \n // Scroll to success message\n successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });\n \n // Hide success message after 3 seconds\n setTimeout(() => {\n successMessage.classList.add('hidden');\n }, 3000);\n } else {\n // Show error message\n errorMessage.textContent = result.message || 'An error occurred. Please try again.';\n errorMessage.classList.remove('hidden');\n }\n } catch (error) {\n console.error('Error submitting form:', error);\n errorMessage.textContent = 'An error occurred. Please try again.';\n errorMessage.classList.remove('hidden');\n } finally {\n // Re-enable the submit button\n submitButton.disabled = false;\n submitButton.innerText = 'Save Information';\n }\n });\n \n // Format file size in human-readable format\n function formatFileSize(bytes) {\n if (bytes === 0) return '0 Bytes';\n \n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n \n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n }\n \n // Initialize\n initUploadcare();\n});",27,[257,280,286],{"_150":287,"_103":710,"_108":711,"_153":139,"_461":712},200,["D",1746639871958],[713],{"_106":714,"_153":139,"_150":287,"_99":286,"_160":715,"_158":171,"_103":716,"_152":281,"_108":711,"_154":710,"_162":-5,"_156":27,"_161":27,"_102":717},"eeb34dc4-2b6a-11f0-8ade-569c3dd06744","document.addEventListener('DOMContentLoaded', () => {\n const form = document.getElementById('additionalInfoForm');\n const submitButton = document.getElementById('submitButton');\n const successMessage = document.getElementById('successMessage');\n const errorMessage = document.getElementById('errorMessage');\n const submissionId = document.getElementById('submissionId').value;\n const imageCount = document.getElementById('imageCount');\n const uploadStatusElement = document.getElementById('uploadStatus');\n const fileListContainer = document.getElementById('uploadcare-gallery');\n \n // Initialize Uploadcare with single file uploaders\n function initUploadcare() {\n try {\n console.log('Initializing Uploadcare widgets with single file uploaders');\n \n // Check if Uploadcare is loaded\n if (typeof uploadcare === 'undefined') {\n console.error('ERROR: Uploadcare library is not loaded!');\n uploadStatusElement.textContent = 'Upload widget failed to load';\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n return;\n }\n \n console.log('Uploadcare library loaded successfully', { version: uploadcare.version });\n \n // Initialize all single file uploaders\n const uploaderIds = ['uploadcareFile', 'uploadcareFile1', 'uploadcareFile2', 'uploadcareFile3'];\n \n uploaderIds.forEach(id => {\n const widget = uploadcare.Widget(`#${id}`);\n console.log(`Widget initialized: ${id}`, widget);\n \n // Track upload progress for each widget\n widget.onChange(function(file) {\n console.log(`Widget ${id} onChange event triggered`, { file });\n if (!file) {\n return;\n }\n \n uploadStatusElement.textContent = 'Preparing file...';\n uploadStatusElement.className = 'mt-2 text-sm text-blue-500';\n \n // Handle file upload\n file.progress(info => {\n console.log('Upload progress:', info);\n uploadStatusElement.textContent = `Uploading: ${Math.round(info.progress * 100)}%`;\n });\n \n file.done(fileInfo => {\n console.log('Upload completed:', fileInfo);\n uploadStatusElement.textContent = 'Processing...';\n \n // Register the individual file\n registerUploadcareFile(fileInfo.uuid);\n });\n \n file.fail(error => {\n console.error('Upload failed:', error);\n uploadStatusElement.textContent = 'Upload failed';\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n });\n });\n });\n \n // Load existing images for this submission\n loadImages();\n \n } catch (error) {\n console.error('Error initializing Uploadcare:', error);\n uploadStatusElement.textContent = 'Error initializing upload widget';\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n throw error; // Re-throw to see the full error\n }\n }\n \n // Register an Uploadcare file group with our server\n async function registerUploadcareGroup(groupId) {\n try {\n console.log(`Registering file group with server: ${groupId}`);\n uploadStatusElement.textContent = 'Registering image group with server...';\n \n const response = await fetch('/register-image-group', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n uploadcareGroupId: groupId,\n submissionId: submissionId\n })\n });\n \n console.log(`Server response status: ${response.status} ${response.statusText}`);\n \n // Try to parse the response as JSON\n let result;\n try {\n result = await response.json();\n console.log('Server response:', result);\n } catch (parseError) {\n // If we can't parse as JSON, get the text\n const errorText = await response.text();\n console.error('Error parsing server response:', parseError);\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n uploadStatusElement.textContent = 'Images uploaded successfully!';\n uploadStatusElement.className = 'mt-2 text-sm text-green-500';\n \n // Refresh the images list\n loadImages();\n } else {\n const errorMessage = result.message || 'Failed to register image group';\n console.error('Server error:', errorMessage);\n \n // Check for database schema errors\n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n \n uploadStatusElement.innerHTML = `\n Database schema error. Please try refreshing the page.\n \n `;\n \n // Add click handler for the refresh button\n document.getElementById('refreshPageBtn').addEventListener('click', () => {\n window.location.reload();\n });\n } else {\n uploadStatusElement.textContent = errorMessage;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n } catch (error) {\n console.error('Error registering Uploadcare file group:', error);\n uploadStatusElement.textContent = `Error: ${error.message}`;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n \n // Register a single Uploadcare file with our server\n async function registerUploadcareFile(uuid) {\n try {\n console.log(`Registering file with server: ${uuid}`);\n uploadStatusElement.textContent = 'Registering image with server...';\n \n const response = await fetch('/register-image', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n uploadcareUuid: uuid,\n submissionId: submissionId\n })\n });\n \n console.log(`Server response status: ${response.status} ${response.statusText}`);\n \n // Try to parse the response as JSON\n let result;\n try {\n result = await response.json();\n console.log('Server response:', result);\n } catch (parseError) {\n // If we can't parse as JSON, get the text\n const errorText = await response.text();\n console.error('Error parsing server response:', parseError);\n console.error('Raw response:', errorText);\n throw new Error(`Server returned invalid JSON: ${errorText}`);\n }\n \n if (response.ok && result.success) {\n uploadStatusElement.textContent = 'Image uploaded successfully!';\n uploadStatusElement.className = 'mt-2 text-sm text-green-500';\n \n // Refresh the images list\n loadImages();\n } else {\n const errorMessage = result.message || 'Failed to register image';\n console.error('Server error:', errorMessage);\n \n // Check for database schema errors\n if (errorMessage.includes('no column named') || \n errorMessage.includes('table') || \n errorMessage.includes('schema')) {\n \n uploadStatusElement.innerHTML = `\n Database schema error. Please try refreshing the page.\n \n `;\n \n // Add click handler for the refresh button\n document.getElementById('refreshPageBtn').addEventListener('click', () => {\n window.location.reload();\n });\n } else {\n uploadStatusElement.textContent = errorMessage;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n } catch (error) {\n console.error('Error registering Uploadcare file:', error);\n uploadStatusElement.textContent = `Error: ${error.message}`;\n uploadStatusElement.className = 'mt-2 text-sm text-red-500';\n }\n }\n \n // Load images for this submission using Uploadcare's API\n async function loadImages() {\n try {\n console.log(`Loading images for submission ID: ${submissionId}`);\n \n const response = await fetch(`/list-images?submissionId=${submissionId}`);\n \n if (!response.ok) {\n console.error(`Error loading images: ${response.status} ${response.statusText}`);\n throw new Error(`Failed to load images: ${response.status} ${response.statusText}`);\n }\n \n const result = await response.json();\n console.log('Image list response:', result);\n \n if (result.success) {\n const images = result.data;\n \n // Update image count display\n imageCount.textContent = `${images.length} image${images.length !== 1 ? 's' : ''}`;\n \n // Render the images using Uploadcare's UI\n if (images.length > 0) {\n renderUploadcareGallery(images);\n } else {\n // Clear the file list container\n fileListContainer.innerHTML = '

No images uploaded yet

LauraMepson

Ad Portal

\n \n \n

\n 👤\n

Account Information

\n \n

\n Company: {{COMPANY_NAME}}
\n Email: {{EMAIL}}
\n Your Unique Link: https://{{HOST}}/?action=continue&id={{ID}}\n

\n Save this link to access your ad portal later.\n

\n \n

\n \n \n \n

\n 🏢\n

Image Gallery

\n \n

Upload images to use in your ads. These images will be available to select when creating new ads.

\n \n \n

\n \n

\n \n \n

\n \n

\n \n \n

Your Images

\n \n \n

\n 0 images\n

\n \n \n

\n 📢\n

Ad Creation

\n \n

Create and manage your ads. Select images from your gallery to use in your ads.

\n \n \n

Ad creation tools coming soon!

You'll be able to create ads and select images from your gallery.

\n \n \n

\n \n

\n Your information has been saved successfully!\n

\n \n

\n \n \n\n \n\n",18,[421,427],{"_150":428,"_103":728,"_108":729,"_153":139,"_461":730},198,["D",1746639828680],[731],{"_106":732,"_153":139,"_150":428,"_99":427,"_160":733,"_158":273,"_103":734,"_152":422,"_108":729,"_154":728,"_162":-5,"_156":27,"_161":27,"_102":735},"d4e73efa-2b6a-11f0-97db-569c3dd06744","\n\n\n \n \n Ad Portal - LauraMepson\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n\n

LauraMepson

Ad Portal

\n \n \n

\n 👤\n

Account Information

\n \n

\n Company: {{COMPANY_NAME}}
\n Email: {{EMAIL}}
\n Your Unique Link: https://{{HOST}}/?action=continue&id={{ID}}\n

\n Save this link to access your ad portal later.\n

\n \n

\n \n \n \n

\n 🏢\n

Image Gallery

\n \n

Upload images to use in your ads. These images will be available to select when creating new ads.

\n \n \n

\n \n

\n \n \n

Your Images

\n \n \n

\n 0 images\n

\n \n \n

\n 📢\n

Ad Creation

\n \n

Create and manage your ads. Select images from your gallery to use in your ads.

\n \n \n

Ad creation tools coming soon!

You'll be able to create ads and select images from your gallery.

\n \n \n

\n \n

\n Your information has been saved successfully!\n

\n \n

\n \n \n\n \n\n",17,[421,427],{"_150":448,"_103":737,"_108":738,"_153":139,"_461":739},197,["D",1746639598910],[740],{"_106":741,"_153":139,"_150":448,"_99":447,"_160":742,"_158":273,"_103":226,"_152":-5,"_108":738,"_154":737,"_162":-5,"_156":27,"_161":27,"_102":743},"4bf315f6-2b6a-11f0-8750-569c3dd06744","# LauraMepson Landing Page\n\nA landing page application that collects company information and allows users to add additional details through email links.\n\n## Features\n\n- Simple landing page with LauraMepson branding\n- Form to collect company name and email\n- SQLite database storage for submissions\n- Email functionality to send users a unique link\n- Continuation page for adding more information\n- Image upload and storage using Uploadcare\n\n## Uploadcare Group Fix\n\nThis project includes solutions for handling Uploadcare image uploads, specifically addressing the issue where multi-file uploads create groups instead of individual files.\n\n### The Problem\n\nWhen using Uploadcare's multi-file uploader, files are grouped together with a UUID like:\n`cb08730c-9c8b-46bb-a79e-9ab0f228939e~1`\n\nTo access individual files, you need to use the `/nth/0/` syntax, which can be cumbersome and doesn't give you direct access to individual file UUIDs.\n\n### Solutions\n\nTwo solutions are provided:\n\n1. **Use Single File Uploaders**: Configure Uploadcare widgets to upload one file at a time\n2. **Extract Individual Files from Groups**: Use the multi-file uploader but extract individual file UUIDs\n\n### Demo Pages\n\n- `/public/uploadcare-demo.html` - A comprehensive demo showing both problems and solutions\n- `/public/uploadcare-fix.html` - A focused solution with implementation guide\n\n## Project Structure\n\n```\n├── api/ # API route handlers\n│ ├── images.ts # Image-related API endpoints\n│ ├── submissions.ts # Submission-related API endpoints\n│ └── index.ts # API routes configuration\n├── controllers/ # Request handling logic\n│ ├── imageController.ts # Image upload/retrieval logic\n│ └── submissionController.ts # Submission handling logic\n├── models/ # Data models and types\n│ ├── image.ts # Image-related types\n│ └── submission.ts # Submission-related types\n├── services/ # Business logic\n│ ├── imageService.ts # Image metadata operations\n│ ├── uploadcareService.ts # Uploadcare integration\n│ ├── databaseService.ts # Database operations\n│ ├── emailService.ts # Email sending functionality\n│ └── templateService.ts # HTML template rendering\n├── utils/ # Utility functions\n│ ├── helpers.ts # Helper functions\n│ └── responseUtils.ts # Standardized API responses\n├── views/ # HTML templates\n│ ├── landing.html # Main landing page\n│ └── continue.html # Continuation page\n├── public/ # Static assets and client-side JS\n│ ├── css/ # Stylesheets\n│ │ └── styles.css # Common styles\n│ └── js/ # Client-side JavaScript\n│ ├── landing.js # Landing page script\n│ └── continue.js # Continuation page script\n└── index.ts # Main entry point\n```\n\n## Database Schema\n\nThe application uses a SQLite database with the following schemas:\n\n### Submissions Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n### Images Table\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_images_v1 (\n id TEXT PRIMARY KEY,\n original_name TEXT NOT NULL,\n content_type TEXT NOT NULL,\n size INTEGER NOT NULL,\n uploaded_at TEXT NOT NULL,\n submission_id TEXT NOT NULL,\n cdn_url TEXT NOT NULL\n)\n```\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Uploadcare:\n- Uploadcare handles file uploads, storage, and CDN delivery\n- Uploadcare's built-in image preview and cropping tools are used\n- Image metadata is stored in our SQLite database\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Environment Variables\n\n- `UPLOADCARE_SECRET_KEY`: Secret key for Uploadcare API authentication\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `emailService.ts`\n- The unique ID generation is handled in `utils/helpers.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing\n\n## Database Schema\n\nThe application uses a SQLite database with the following schema:\n\n```sql\nCREATE TABLE IF NOT EXISTS laura_mepson_submissions_v1 (\n id TEXT PRIMARY KEY,\n company_name TEXT NOT NULL,\n email TEXT NOT NULL,\n created_at TEXT NOT NULL,\n additional_fields TEXT\n)\n```\n\n## User Flow\n\n1. User visits the landing page\n2. User submits company name and email\n3. Data is saved to SQLite database\n4. User receives an email with a unique link\n5. User can click the link to add more information\n6. Additional information is saved to the database\n7. User can upload and manage images related to their submission\n\n## URL Structure\n\n- Main landing page: `https://[username].web.val.run`\n- Continuation page: `https://[username].web.val.run?action=continue&id=[unique_id]`\n\n## Image Storage\n\nImages are stored using Val Town's blob storage:\n- Images are stored with a unique ID\n- Metadata is stored alongside each image\n- Users can upload, view, and delete images\n- Images are associated with a specific submission\n\n## Development Notes\n\n- When modifying the database schema, create a new table with a new version number\n- Email templates are defined in `email.ts`\n- The unique ID generation is handled in `utils.ts`\n- Val Town HTTP vals use query parameters instead of path parameters for routing",[447],{"_150":617,"_103":745,"_108":746,"_153":139,"_461":747},196,["D",1746639563811],[748],{"_106":749,"_153":139,"_150":617,"_99":623,"_160":624,"_158":318,"_103":181,"_152":258,"_108":746,"_154":745,"_162":-5,"_156":27,"_161":27,"_102":750},"37075512-2b6a-11f0-805f-569c3dd06744",[257,623],"page","hasNext","routes/_app","actionData","errors"]

Uploadcare Single File Demo

Upload Images

Results

Implementation Code

Uploadcare Individual Files Demo

Upload Images

Problem: Group Uploads

Solution 1: Individual File Uploads

Solution 2: Process Group Files Individually

Results

Group Upload Result

Individual Files Result

Smart Group Handling Result

Uploadcare Group Fix

The Problem

Solution 1: Single File Uploads

Solution 2: Extract from Group

Extracted Files

Implementation Guide

JavaScript Code

Backend API Example

Hello from LauraMepson!

LauraMepson

Ad Portal

Account Information

Company Information

Image Gallery

Your Images

Ad Creation

LauraMepson

Already have an account?

Submission Successful!

LauraMepson

Already have an account?

Submission Successful!

Uploadcare Single File Demo

Upload Images

Results

Implementation Code

Uploadcare Individual Files Demo

Upload Images

Problem: Group Uploads

Solution 1: Individual File Uploads

Solution 2: Process Group Files Individually

Results

Group Upload Result

Individual Files Result

Smart Group Handling Result

Uploadcare Group Fix

The Problem

Solution 1: Single File Uploads

Solution 2: Extract from Group

Extracted Files

Implementation Guide

JavaScript Code

Backend API Example

LauraMepson

Ad Portal

Account Information

Company Information

Image Gallery

Your Images

Ad Creation

LauraMepson

Ad Portal

Account Information

Company Information

Image Gallery

Your Images

Ad Creation

LauraMepson

Ad Portal

Account Information

Company Information

Image Gallery

Your Images

Ad Creation

LauraMepson

Ad Portal

Account Information

History