File Dropzone

Usage

import { FileDropzone } from '@wdzyi/ui';

<FileDropzone
  accept='.pdf,.png,.mp4'
  maxSize={50_000_000}
  onFiles={(files) => setCount((count) => count + files.length)}
  upload={(file, onProgress, signal) => uploadFile(file, { onProgress, signal })}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

acceptstring

The files it takes, as a file input’s accept: extensions such as .pdf, types such as image/png, or families such as image/*. A dropped file that doesn’t match is listed as the wrong type. It writes the hint under the words too.

maxSizenumber

The largest file it takes, in bytes. A larger one is listed with the limit it went over.

multipleboolean = true

Takes several at once. Off, a new file takes the place of the last.

onFiles(files: File[]) => void

Called with the files it took, each time some arrive.

upload(file: File, onProgress: (progress: number) => void, signal: AbortSignal) => Promise<unknown>

Does the uploading. Call onProgress with how far it’s got, from 0 to 1, and resolve once it’s through, or reject if it fails. The signal aborts if the dropzone goes. Without it, files are listed as they arrive.

classNamestring

Added to it. It fills the width it’s given.

Notes

• Files held over it lift it 2px on a spring and set its dashed edge marching, a dash every 8px, once along in 480ms. Dropped, they list in below, each row opening 70ms after the one before, as the area folds from 124px to a 44px strip over 440ms.
• A bar eases to each new progress over 360ms. Once a file’s through, its pixels turn into a green tick and the bar fades into the hairline under its row. One that fails turns pink and keeps its bar where it stopped, and Retry calls upload again, the bar carrying on as new progress comes in.
• A real file input lies over the area, so a press, Enter or Space browses, and a screen reader hears it as the input it is, with the hint. Its focus ring goes round the area. Each file’s bar is a progress bar, and each file arriving, going up or failing is announced.
• The demo’s uploads go through a pretend connection that shares its bandwidth between the files in flight, so the small one is through first. With reduced motion, nothing lifts, marches or slides, and the area changes size at once.