Task: Add noscript fallback to image upload components #484

New issue

Open

opened 2026-04-16 07:11:29 +00:00 by jjalangtry · 0 comments

jjalangtry commented

2026-04-16 07:11:29 +00:00

(Migrated from github.com)

Problem

`ImageUpload` uses `FileReader`, `Canvas.toBlob()`, drag-and-drop events, and `fetch()` to upload to S3 presigned URLs — all requiring JS. Without JS the upload UI appears but is completely non-functional, with no indication to the user why.

Affected Files

`next/components/common/ImageUpload.tsx`
`next/app/(main)/purchasing/ReceiptForm.tsx` (receipt photo upload)

Fix

Add inside the upload component:

```html
\`\`\`

## Problem \`ImageUpload\` uses \`FileReader\`, \`Canvas.toBlob()\`, drag-and-drop events, and \`fetch()\` to upload to S3 presigned URLs — all requiring JS. Without JS the upload UI appears but is completely non-functional, with no indication to the user why. ## Affected Files - \`next/components/common/ImageUpload.tsx\` - \`next/app/(main)/purchasing/ReceiptForm.tsx\` (receipt photo upload) ## Fix Add inside the upload component: \`\`\`html <noscript> <p>Image upload requires JavaScript to be enabled.</p> </noscript> \`\`\`