Uploader
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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.
The Bulk Uploader allows the user to upload multiple files via a drag and drop or a selection action.
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
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
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
