Uploading is a common pattern in enterprise applications. Well-designed upload flows allow the user control while assisting them in their task.

Starting an upload

If there is no data yet, an upload prompt underneath the table will allow the user to select files from their computer or drag a file into the application to begin the upload process.

Empty table prompting an upload

With pre-populated data, uploading additional data is done from an action in the top right of the table.

Table with content, with

Once the file has been selected, a preview of the data to be uploaded shows.

List of data to be uploaded in a modal dialog

Upload messages


Once the upload is complete, a dismissable confirmation notification will display to indicate the successful upload.

Confirm message over a table


If there is an error in process the selected file(s), use a non-dismissable error notification at the top of the modal and a prompt to upload a new file.

Error message inside a modal dialog

If there are errors (such as duplicated records), an error notification should display on the table to note this.

Error message over a table

Last updated: Jun 2018

Next: Wizards