File Upload

Interaction Specs

Interaction Specs: 
1. Note the default Modal for Upload Attachment.

This screen is displayed once the user clicks on the 'Upload Attachment' button.

2. Multiple files can be uploaded simultaneously.

There is no limitation on number of files. However, each file should not exceed 5GB for modern browsers and 2GB for older browsers.

3. Drag and Drop the file(s).

Alternately, the user may drag and drop box to upload files. User can use either or both ways to upload files.

4. Close the Modal box.

User can use the close button to close the upload modal. If the upload is in progress, clicking on the close icon will abort the upload. Clicking on a 'Cancel' button, when the 100% complete message is displayed, won’t delete the file.

5. Launch desktop local directory to select file(s).

The 'Add File' button will launch the user’s desktop Window Explorer, or Finder on Mac OS, to allow for select one or multiple files.

6. View number of files uploading.

This message displays the number of files being uploaded, percent upload compelete, and the amount of time left for the upload to finish.

7. Upload the Progress Bar.

This is the individual file upload progress bar. This bar displays the file name being uploaded, the amount of file size uploaded out of the total file size, and the time remaining for the upload to finish.

8. Slow Internet speed connection.

This message will only display if the user is on a slow internet connnection.

9. Cancel the upload.

The user can cancel an individual file upload using this cancel button.

10. Upload additional file.

This button is used to upload another file, or browse one or more files from the local machine.

11. File upload success message.

This message is displayed once the files have successfully uploaded.

12. File size and name and success meassage.

Once the file has uploaded successfully, the progress bar displays the total file size along side it’s file name, and the 'Success!' message.

13. Delete uploaded file.

The user can choose to delete this file using the delete icon next to the success message.

14. Complete file upload process.

The 'Done' button will enable (active), only after all files have been uploaded successfully. Until then it stays at inactive / disabled state.

15. Minimized modal view with failure message.

The modal overlay can be minimized so user can focus on other tasks on the page. The minimized view will show the progress bar and status of the upload process.

16. View multiple attachments.

This is an example of multiple files being uploaded in progress.

17. Upload confirmation message.

The message '3 file uploaded successfully!' is displayed when all files have completed upload.

18. Alert messages and confirmation messages.

If any file is over the size limit, an alert message should be displayed and the alternate solution of uploading the file should be provided. In this case, the 'Try FTP Server' link is available.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

To upload and monitor the uploading of files, as well as monitor for system messages for time remaining, alerts, errors, and confirmations.

What is the Solution

The pattern provides file size and Internet connection speed monitoring to ensure the process is successful. Upload provides the percentage of time and the number of minutes to completion, as well as error and success messages.

Advantages include working while view is minimized for:

  • Downloading and monitoring process while continuing work.
  • Uploading and monitoring process while continuing work

When to Use This Pattern

When the uploading and monitoring of one or more files is necessary or useful.

Do Not Use This Pattern

With files larger than 5GB for modern browsers, or 2GB in older browsers.


GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015