File upload

A file upload allows users to select, preview, and manage a list of files before uploading them. It typically includes a distinct area for file selection (like a button or drop zone) and a dynamically generated list of the chosen files.

When to use

Multi-file selection

Use when users need to upload multiple files and want to see a clear list of their selections before proceeding.

Multi-file selection

Use when users need to upload multiple files and want to see a clear list of their selections before proceeding.

Multi-file selection

Use when users need to upload multiple files and want to see a clear list of their selections before proceeding.

Dedicated upload sections

Use as a primary feature on a page, such as for adding attachments to a support ticket or uploading documents to a repository.

Dedicated upload sections

Use as a primary feature on a page, such as for adding attachments to a support ticket or uploading documents to a repository.

Dedicated upload sections

Use as a primary feature on a page, such as for adding attachments to a support ticket or uploading documents to a repository.

When to avoid

Inline form fields

For simple, single-file selections within a dense form, the more compact file input component may be a better fit.

Inline form fields

For simple, single-file selections within a dense form, the more compact file input component may be a better fit.

Inline form fields

For simple, single-file selections within a dense form, the more compact file input component may be a better fit.

Simple uploads

If the action is just to replace a single image (like a profile picture) without needing a persistent file list, a simpler upload mechanism might be less visually complex.

Simple uploads

If the action is just to replace a single image (like a profile picture) without needing a persistent file list, a simpler upload mechanism might be less visually complex.

Simple uploads

If the action is just to replace a single image (like a profile picture) without needing a persistent file list, a simpler upload mechanism might be less visually complex.

Specifications

Style

Button

A compact option presenting the upload action as a button.

Drop zone

A large, clickable target area for dragging and dropping files.

Button

A compact option presenting the upload action as a button.

Drop zone

A large, clickable target area for dragging and dropping files.

Button

A compact option presenting the upload action as a button.

Drop zone

A large, clickable target area for dragging and dropping files.

Button

A compact option presenting the upload action as a button.

Drop zone

A large, clickable target area for dragging and dropping files.

Upload type

Single-file

Once a single file is selected, the upload button is removed.

Multi-file

The upload button is still present, prompting multiple files.

Single-file

Once a single file is selected, the upload button is removed.

Multi-file

The upload button is still present, prompting multiple files.

Single-file

Once a single file is selected, the upload button is removed.

Multi-file

The upload button is still present, prompting multiple files.

Single-file

Once a single file is selected, the upload button is removed.

Multi-file

The upload button is still present, prompting multiple files.

Anatomy

Label

Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.

Button / Drop zone

The primary call-to-action button opens the file browser on click and doubles as a drop zone for dragging and dropping files.

File list item

Each uploaded file appears as a distinct list item, displaying its name and providing a control to remove them from the queue.

Assistive text

Can communicate essential constraints, such as maximum file size and supported file formats.

Value

File upload