Skip to main content

File upload

Enable users to select and upload files.

View in StorybookExternal link icon

Usage​

A file upload is commonly found in forms but can also live as a standalone element.

Anatomy​

Upload area​

The upload area enables users to select or drag and drop files to upload. For a more comfortable experience, users can click anywhere in the file upload area to open their computer file system.

Upload item​

The upload item displays information about the selected file status.

If users can download an uploaded item, its title becomes a contextual link.

Size and spacing​

Feel free to customize the upload area as long as its height fits our 4 px modular grid and its width sticks to the columns.

Behavior​

Appearance​

By default, each new upload item appears below the previous one. You can implement a different sorting for the uploaded items upon page refresh.

Preview​

You can display a preview of the uploaded images.

Required field not filled​

If the user submits the form without selecting a file, the error message "This field is required" appears.

File type not recognized​

If the file type is not recognized, the error message "Wrong format" appears.

Upload failed due to server or network error​

If a backend, server, or connectivity issue occurs during the upload, the error message "Something went wrong, please try later" appears.

File size limit exceeded​

If the uploaded file exceeds the maximum allowed size, the error message "File exceeds size limits" appears.

File limit​

When file limit is reached, the error message "File limit has been reached" appears.

Upload one file at a time​

If only one file can be uploaded at a time, the error message "Only one file is allowed" appears.