File uploading
v1.0
File uploading allows users to upload one or more files to a location.
- Skin
- Marko
- React
File uploading allows users to upload one or more files to a location.
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”.
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 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.
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.
The file name is optional and can be included to help users distinguish between different files.
The item description is optional and may be provided to help users understand a document’s features or purpose.
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.
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.
An example of a file gallery showing four files with two in the loading state.
The loading spinner sets expectations for the user on how much longer the upload will take to complete.
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.
A user can cancel an ongoing file upload by clicking/tapping the button icon located in the corner of the file preview card.
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.
If only a single action is available for an file preview card, such as delete, use an icon button for that specific feature.
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.
The width of the file input field is responsive to the size of its parent container which varies per screen size.
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.
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.
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.
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.
The design supports multiple file uploads and accommodates for properties like file name and description—all without overcrowding the interface or compromising usability.
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.
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.
