Skip to content
Browse themes
All blocks
Product

File Upload

7 blocks in this category, each rendered live below. Open any of them for the full source and a copy button.

A block is one finished section of a page — a pricing table, a hero, a footer.

Open the full page for this block

Drag & Drop Upload

Dropzone with per-file progress and a drag counter that fixes the flicker every naive dragleave handler produces.

File Upload219 lines1 dep
Open the full page for this block

Upload Progress List

The list that follows the dropzone: complete, uploading, queued and failed rows with cancel and retry — because hiding the failure is the classic upload bug.

File Upload171 lines1 dep
Open the full page for this block

Resumable Large Upload

One big file on a connection that will drop: a bar allowed to go backwards when a chunk is retried, a time estimate that is a range or nothing, and a promise about closing the tab made before it is needed.

File Upload237 lines1 dep
Open the full page for this block

CSV Column Mapper

The screen between "file uploaded" and "data imported": source columns mapped to schema fields, with a sample value under each and required fields blocking the button.

File Upload280 lines1 dep
Open the full page for this block

Avatar Crop & Upload

Framing a profile photo with keyboard-operable zoom and position, showing what gets trimmed rather than hiding it behind the mask.

File Upload268 lines1 dep
Open the full page for this block

Upload Requirements Form

An upload form that states the constraints before the file is chosen, rather than rejecting it after a two-minute transfer.

File Upload184 linesNo deps
Open the full page for this block

Import From URL Form

The import path for a file that is already on the internet, which does not need to travel through the browser at all.

File Upload178 linesNo deps