Orvain UI

Avatar uploader, ring

Profile photos that upload in the background.

Get Pro to installPro18 blocksReact, Vue and Figma
MCPConnect the MCP server
Ethan MillerProduct designer

PNG, JPG or WEBP · square works best · up to 5 MB

Resume

One PDF or DOCX, up to 10 MB.

Ethan-Miller-CV.pdf
2.2 MB Uploaded

Crop your photo

Drag to reposition. It shows as a circle everywhere.

More in File Upload blocks#

Dropzone

Attaching files to a form: the zone, the live rows and the quota in one card

Dropzone, whole card

Attaching files where the files are the content: no permanent drop box

Dropzone, quota of files

A request with a total allowance, such as a 50 MB form upload

Avatar uploader

Profile and onboarding forms: one image with Replace, Adjust and Remove, over a single-file zone

Avatar uploader, in the circle

Onboarding where the photo is the star and the crop should look like the result

Avatar uploader, ring

Profile photos that upload in the background

Attachments manager

Files already uploaded: a calm list, one of them failed and retryable

Attachments manager, select

Managing many files at once

Attachments manager, failures first

Libraries where problems must not hide in the list

Upload field

A form that collects images: the zone and everything already attached, in one field

Upload field, one field

A form where photos and documents go in together, with a hard limit on how many

Upload field, slots

A listing or product form where the order of the photos matters and the first is the cover

Uploading file

The transport itself: one row playing its own progress, pause and failure

Uploading file, ring

A single large upload where the file itself is the control

Uploading file, parts

A big file sent in chunks, where a retry should visibly keep what arrived

Batch upload

A whole batch on one row: a status for everything in flight, not one file

Batch upload, stack

A batch where people want to see which files are in it

Batch upload, ink dock

Uploads that continue while the person keeps working elsewhere in the app

When to use#

  • Attaching documents to a form that is submitted as a whole
  • A single image that replaces whatever is currently there
  • Transfers long enough that pause, resume or cancel are worth having
  • A queue where several files each need their own state and their own retry

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans