File upload
The file uploader allows users to upload one or more files to a location.
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
The file uploader 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.
Drop zone button
- Heading
- Description
- Select/drop zone
- Complementary CTA
Add button
- Heading
- Icon
- Background
Gallery item
- Asset container
- Media indicator
- Icon button
- File name (optional)
- Counter
List item
- File name
- Item container
- Loading spinner
- Icon button
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 the drop zone, the cursor changes to a closed hand. Once the file is released into the drop zone, the cursor switches to a hand pointer.
Add button
The add button is used on native platforms instead of the drop zone button. The button is provided in a square and rectangle with label variants. The heading and description are placed above the gallery section. The add 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.
Upload limits
When the file uploader allows multiple files to be uploaded, the drop zone or add button remains visible while files upload and all uploaded files appear in a queue. If there is a limit to total files, the drop zone or add button will hide when the limit is reached. If files are removed so that the total is below the limit, the drop zone or add 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/drop zone. Users can only select files in the required format, which prevents errors related to file format. If a file fails to upload because of connectivity issues, an error message will show below the asset container. For this use case, users can click a retry button to attempt the upload again.
Cancel uploading files
A user can cancel an ongoing file upload by clicking/tapping the button icon located in the corner of the asset container.
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 uploaded asset, such as delete, use an icon button for that specific feature.
Additional actions
If multiple actions are available for an uploaded asset, 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.
Select/drop zone width
The width of the select/drop zone is responsive to the size of its parent container which varies per screen size.
Gallery layout
Gallery containers have a responsive height and width to maintain a square ratio and fit their grid layout. All containers should be displayed at the same size. The parent container size will determine the gallery container widths, within the boundaries of 120px minimum and 396px maximum.
The responsive grid layout will allow asset containers 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
Small
On small screens, only two asset containers can be placed per row. If there are additional assets beyond the second row, they can be accommodated using the overflow property.
After tapping the overflow, a panel will open that displays all the assets.
Medium and large
Depending on the width of the parent container, up to 6 asset containers may fit per row. If there are more assets, they will wrap to a second row. The 6th asset in the overflow utilizes the overflow property.
After clicking the overflow, the additional assets are displayed in a modal.
Description
Do truncate the asset description if it extends beyond two rows; the user can read the full description in the file preview.
Don’t show more than two lines of description text at a time.
