Alert Avatar Bottom sheet Button Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Icon button Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input Upload Upload input When to useTypesBest practicePlacementInteractionStatesContentAvailability
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Upload input

An upload input lets users upload a single file, or multiple files, within a form.

TBC
When to use

Use an upload input:

  • in forms alongside other fields or inputs
  • when there's no need for the user to see a preview or thumbnail on screen of what they've uploaded

Don't use an upload input:

  • if the only input on the screen is for uploading files
  • if you need to show users a thumbnail or preview image of their upload on the same screen

Types

You can use the upload input to let users upload a single file or multiple files.

An upload input with a single file.
An upload input with multiple files.
Best practice
  • Only use the upload input within forms.
  • If the user removes a file, display a prompt alert to confirm the action.
  • If an upload fails, make sure the description text on the failed state is specific, so user understands what went wrong.
  • When truncating long file names, make sure the ellipsis is in the center of the string to avoid truncating essential identifiers, like the end of the name and the file extension.

Placement

You can use an upload input on both desktop and mobile screens. Its width should be aligned with the other input fields in a form.

Interaction

Users can tap or click anywhere on the input field to trigger the upload as the whole area is interactive. This allows them to select the file(s) they want to upload from their device.

Once a file has been successfully uploaded, users can click or tap on the cell to see a preview of the file, allowing them to double check what they uploaded.

Users can also remove a file by pressing the interactive bin icon, at which point we should display a prompt alert to confirm the action. This is a native dialogue alert on iOS and Android, or a modal on web.

States

The upload input has 4 different states.

An upload input in the default state.
An upload input in the loading state.
An upload input with an uploaded state.
An upload input where the upload has failed.
Content

Label

The label describes the type of file the user needs to upload, for example 'Invoice'. It should also be consistent with the other labels in the form.

An upload input with a descriptive label.
An upload input with a question as the label.

Title

In the default state, the title is a call to action. The default copy for this state is 'Upload file' or 'Upload files'. But if you need to change this, treat it like writing button copy. That means starting with a verb, and using as few words as possible.

An upload input with a short instruction as the title.
An upload input with a long title.

Description

The description describes the state of the upload. For the failed state, it's important to make this copy as specific as possible so the user understands what went wrong and what they can do to fix it.

A failed upload where the description tells the user why the upload has failed.
A failed upload where the description just tells the user that it's failed.
Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation