File upload

Task flows refer to the steps users progress through when interacting with patterns. They’re based on specific scenarios and demonstrate how users can successfully perform tasks within each pattern layout. To find prototypes for the task flow examples shown on this page, visit the Task flows (internal only).

Task flow types

There are two main file upload task flows: manual and automatic upload. Select the task flow that best matches your use case and product requirements.

Note: Any of the task flows below can be adjusted to use the default uploader component or the drag and drop component based on design needs, use case, or product preferences. For more information, reference the File upload guidelines.

Automatic file upload

An automatic file upload begins immediately once a user selects a file from their OS file browser or drops it in the drop zone. Once files are selected, they’re generally represented with file cards underneath the uploader component. Unlike manual uploads, the files are transferred to the server immediately.

Note: This is the recommended method as it provides the simplest experience and aligns with user expectations.

• Clearly communicate that files will be uploaded automatically using labels and inline messaging.

Manual file upload

In a manual file upload, users select the files they want to upload by placing them in the drop zone or using the OS file browser. Once files are selected, they’re generally represented by file cards underneath the uploader, but aren’t transferred to the server until the user manually sends them, typically by selecting an “Upload” or “Submit” button.

• Use a modal to enable users to review selected files before manually imitating the upload.

Feedback flows and status updates

Feedback typically occurs after the user takes an action to help them correct mistakes or guide next steps. Status refers to updates that typically don’t require user action. Both communicate important information to users such as errors and success.

Feedback and status updates can be communicated during file upload flows to ensure users are aware of their upload status.

• Reference the Forms to learn more about form validation, as forms are a key part of a wizard flow.
• Reference the Feedback and status to learn more about communicating feedback and status.
• Reference the Messaging for guidance on crafting content within alert messages.

Incorrect file type or size

In this flow, the user selects files that don’t meet the file type or size requirements. Feedback should be provided as soon as the system recognizes the files don’t meet the requirements.

• Use an inline error message to call attention to the error and help the user correct it quickly.
• Clearly specify file requirements to reduce the likelihood of this error occurring.

No files selected

In this flow, the user attempts to initiate an upload without selecting files. Feedback should be provided as soon as the system recognizes no files were selected.

• Use a Section message to call attention to the error and help the user correct it quickly.

Number of selections exceeds limit

In this flow, the user selects too many files for upload. Feedback should be provided as soon as the system recognizes too many files were selected.

• Use a Section message to call attention to the error and help the user correct it quickly.
• Clearly specify how many files can be uploaded to reduce the likelihood of this error occurring.
• Limit the number of files that can be selected in the OS file browser when possible.
• Do not upload any files until the error is corrected.

Multiple files with errors

In this flow, multiple files have errors. They may all have the same error or independent ones. Feedback should be provided as soon as the errors are recognized.

• Use a Section message specifically indicating which files have errors to ensure users can identify and locate them.
• Use an error state and inline message for each file that failed to upload.

Duplicate file selected

In this flow, the user selects the same file for upload twice. Feedback should be provided as soon as the duplicate selection is recognized.

• Use a Dialog to inform the user of the error and include relevant actions such as replacing or renaming the duplicate file.

Network errors

In this flow, network or connectivity errors prevent files from uploading. This status update should be provided immediately in the form of an error.

• Use a Banner to notify users of the error and explain relevant next steps.
• Use an error state and inline message for each file that failed to upload.

Communicating success

Success confirmations indicate that files uploaded successfully. The file card component includes a circular progress indicator that shows a success state upon completion. If your design uses an alternate file display, ensure status is communicated through another accessible method.

• Reference the Feedback and status to learn more about communicating success.
• Reference the Messagingfor guidance on crafting content within success messages.

• Consider adding a Flag to inform users when all files have uploaded successfully. This is especially helpful during multi-file uploads.