FileUploadSection

App

High-level upload organism: drop zone + file list + remove. M1 implements drag/drop, paste-from-clipboard, accept-pattern + maxSize + maxFiles validation. M2 will add image thumbnails + crop dialog; M3 chunked + resumable uploads. Pixel-identical EJS sibling at modules/app/FileUploadSection/FileUploadSection.ejs.

Basic drop zone

Preview

Project attachments

Drag & drop files here, or

PDF, images up to 5 MB each

No files selected yet.

Code
<FileUploadSection title="Project attachments" hint="PDF, images up to 5 MB each"
  multiple accept="image/*,.pdf" maxSizeBytes={5242880} />

Paste from clipboard

Preview

Bug report screenshots

Drag & drop files here, or

or paste from clipboard

Drop, browse, or paste (Cmd/Ctrl + V while focused)

No files selected yet.

Code
<FileUploadSection title="Bug report screenshots" multiple enablePaste
  accept="image/*" maxFiles={5} maxSizeBytes={4 * 1024 * 1024}
  hint="Drop, browse, or paste (Cmd/Ctrl + V while focused)" />
Sourcemodules/app/FileUploadSection/index.tsx