Uploader

Uploader

Usage

The file uploader component is used when a user needs to upload one or more files into the application, by either drag and drop, or by clicking the link that opens the file upload prompt. The file uploader must always provide clear feedback on status of the file being uploaded.

There are two types of file uploader: Single Uploader and Bulk Uploader.

There are no restrictions on the supported files to be uploaded as this is a product-specific requirement.

Single Uploader

The Single Uploader allows the user to upload files individually, through a drag and drop action or a selection. It's used as an inline component for specific requests.

Bulk Uploader

The Bulk Uploader allows the user to upload multiple files via a drag and drop or a selection action.

Best Practices

• The uploader should give clear feedback on the progress of the files being uploaded and should provide an option to remove previously uploaded files

• The uploader should clearly inform user if the file could not be uploaded and provide clear feedback on the supported file types or the type of error

• The option to upload them on click should be available with keyboard navigation

Uploader States and Behaviour

Single Uploader

The single uploader is a dynamic component where all actions and state changes (progress, success, error, uploaded) happen in the same place, the component itself.

Mockups

Bulk Uploader

The bulk uploader has 2 states: Default and Active.

For the uploaded, progress, success and error states, the designer must use the Single uploader components. They appear after the user has dropped or selected their files into the uploader area, and will be stacked below the bulk uploader as a list.

Mockups