File uploading

v1.0

File uploading allows users to upload one or more files to a location.

Skin
Marko
React

Stylized artwork of a file upload pattern.

Considerations

Consistent

File upload ensures that users encounter the same interface and process whether they are uploading images, videos, or documents, promoting ease of use and reducing confusion across different parts of the system.

Compact

The design supports multiple file uploads and accommodates for properties like file name and description—all without overcrowding the interface or compromising usability.

Recognizable

File upload leverages the familiar visual cues commonly found in industry best practices and are widely recognized across various platforms and devices. The design helps users swiftly locate the upload area, creating a familiar and recognizable experience.

Anatomy

File input field

Heading
Description
Select/drop zone
Complementary CTA

Add file button

Heading
Icon
Background

Preview card

Asset container
Media indicator
Icon button
File name (optional)
Counter

List item

File name
Item container
Loading spinner
Icon button

Properties

Heading

On web, “Drag and drop files” is the required bolded heading to describe the user’s available action in the file upload container. This sets the correct expectation for interactions.

On native, the heading can be adjusted to be specific, for example “Add files” or “Add photos”.

Description

The description provides guidance on the acceptable formats and sizes for users. It can be modified to adapt to varying file upload requirements.

Drag and drop

Drag and drop functionality is available on the web. When a user grabs a file and hovers over file input field, the cursor changes to a closed hand. Once the file is released into the file input field the cursor switches to a hand pointer.

Add file button

The add file button is used on native platforms instead of the file input field. The button is provided in a square and rectangle with label variants. The heading and description are placed above the gallery section. The add file button leads to the native camera roll, or presents a menu of multiple options, such as take photo or select photo.

File name

The file name is optional and can be included to help users distinguish between different files.

Description

The item description is optional and may be provided to help users understand a document’s features or purpose.

Media types

File types other than images are distinguished with the media type badge. Videos includes the play icon and time label. Other file types include a format abbreviation such as PDF, CSV etc.

Behavior

Upload limits

When the file uploader allows multiple files to be uploaded, the file input or add file button remains visible while files upload and all uploaded files appear in a queue. If there is a limit to total files, the file input or file button will hide when the limit is reached. If files are removed so that the total is below the limit, the file input field or add file button will reappear.

Progress states (gallery)

An example of a file gallery showing four files with two in the loading state.

Progress states (list)

The loading spinner sets expectations for the user on how much longer the upload will take to complete.

Validation

If a user selects a file that exceeds the specified size, an error message will appear above the selection/file input field. Users can only select files in the required format, which prevents errors related to file format.

Cancel uploading files

A user can cancel an ongoing file upload by clicking/tapping the button icon located in the corner of the file preview card.

Preview

The file preview is displayed in a bottom sheet or light-box modal that can be accessed from either the main page or the overflow modal (if there are multiple assets). This preview allows for viewing details and an enlarged format for all media types.

Single action

If only a single action is available for an file preview card, such as delete, use an icon button for that specific feature.

Additional actions

If multiple actions are available for a file preview card, these options can be presented in a menu. This menu is accessible through an icon button. The delete action will remove the asset from the system.

File input width

The width of the file input field is responsive to the size of its parent container which varies per screen size.

File preview card layout

File preview card have a responsive height and width to maintain a square ratio and fit their grid layout. All cards should be displayed at the same size. The parent container size will determine the file preview card widths, within the boundaries of 120px minimum and 396px maximum.

The responsive grid layout will allow cards to wrap to multiple rows as needed.

Breakpoint 320 - 2 columns
Breakpoint 512 - 4 columns
Breakpoint 768 - 5 columns
Breakpoint 1024 - 7 columns
Breakpoint 1280 - 9 columns
Breakpoint 1440 - 10 columns

Grid columns

The number of columns in the file preview card grid changes responsively based on the width of the parent container. The media container width will grow and shrink to fill the column space.

Screen sizes

Small

On small screens, only two file preview cards can be placed per row. If there are additional card beyond the second row, they can be accommodated using the overflow property.

After tapping the overflow, a panel will open that displays all the cards.

Medium and large

Depending on the width of the parent container, up to 6 file preview cards may fit per row. If there are more cards, they will wrap to a second row. The 6th card in the overflow utilizes the overflow property.

After clicking the overflow, the additional cards are displayed in a modal.