File Upload

A 494px field for attaching files: a dashed drop zone, then a row per file that shows its progress, and a finished file row or image card once it lands.

Upload/Add Attachments

This is a hint text to help user.

This is a hint text to help user.Info Here

import { DropzoneField, FileDropZone } from '@orvain/react';
 
<DropzoneField
  label="Upload/Add attachments"
  required
  hint="This is a hint text to help user."
  helper="This is a hint text to help user."
  aside="Info here"
>
  {({ inputId, describedBy, invalid }) => (
    <FileDropZone
      caption="(Max. File size: 25 MB)"
      inputId={inputId}
      describedBy={describedBy}
      invalid={invalid}
      onFilesSelected={(files) => upload(files)}
    />
  )}
</DropzoneField>

Add an Orvain File Upload field titled “Upload/Add Attachments”, required, with the hint “This is a hint text to help user.” and a flat drop zone reading “Click To Upload From Device” and “(Max. File size: 25 MB)”.

Orvain MCPIncluded with the library

File type icons

import { FileTypeIcon } from '@orvain/react';
 
<FileTypeIcon type="PDF" />
<FileTypeIcon type="ZIP" size={40} />
<FileTypeIcon type="GIF" size={24} />

When to use#

For attachments, imports and media, when people often have the file open in another window.
When several files upload at once and each needs its own progress, pause and cancel.

Anatomy#

1Drop zone

#fcfcfc with a 2px dashed #f2f2f2 edge inside, radius 16: a 28px upload glyph, Click To Upload From Device, and the size limit.

2File Upload [1.0]

The progress row: a 60px file tile, name, size so far, a 6px bar, the percentage, pause or resume, and cancel.

3File Upload [2.0]

A tray row for a batch, its progress a 40% blue wash with a 6px bar along the bottom.

4Uploaded File

Icon, name, size and type, with 40px refresh, delete and download buttons; Basic, Outline + Fill or Fancy, in three sizes.

5File icons

A folded page in a colour per type (PDF, JPG, XLS, DOC and ten more), 18 to 120px tall.

States#

Default

The drop zone alone.

No Data + Error, Data + Error

The zone is unchanged; the hint below turns red with the reason.

Uploading

A progress row per file: Starting, a percentage, Paused, Failed with a retry, Completed, Deleted.

Single Doc, Single Image, Multiple Images, Uploaded

A finished file in a well, 175px image cards, or a list of uploaded rows with a green Uploaded badge.

Source#

Preview – final code pending

The File Upload is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

file upload