File upload dropzone allows users to upload content from their computer or device into the application by dragging a file (or files) into a target zone.
- User needs to upload one or more files.
- Uploading files by dragging and dropping.
Don’t use when
- Space is limited. Use a button action instead.
- You need multiple instances of uploading files on one page.
- Label (optional): communicates the context of the file upload.
- Description (required): explains any limitation as to the file format, number of files, and/ or the maximum size. Provide as much information to the user as you can to help prevent errors.
- Drag Zone (required): box outlined with a dotted line signifying the target zone for dropping files.
- Icon (optional): upload icon
- Text instructions (required): eg. “Drag files here or browse to upload.”
- File picker (required): provide the user an option to open file browser (a link or a button). Make sure the drop zone is focusable and accessible with the keyboard.
- When the user drags a file into the dropzone, provide a visual clue to show that the user has hit the target area and that the action is about to perform is valid. For example, when the user hovers over the zone while dragging a file, change the color of the box to blue (to indicate a valid action) or red (to indicate an invalid action).
- To help the user with motor navigation of moving a file into a precise location, the file upload dropzone should be active outside of its borders. It increases the area of the dropzone and provides a feeling of magnetic attraction preventing errors and speeding up interaction with the component.
- Validate the file(s) to communicate to the user the effectiveness of his action.
- If the upload might take more than a few seconds, show progress of the upload. You may use a Progress Bar to show remaining time to upload a file or files.
- In case of an error, provide clear visual clues (information about the problem that occurred and specific instructions as to how to fix it.
- Label: keep the label short and concise limiting it to a few words and a single line of text.
- Description: provide straightforward, jargon-free information about file format requirements and limitations to prevent errors.
- The drop zone component builds on the native HTML
<input type="upload">element. It includes a visual
<button>and/or a drag-and-drop area that can receive keyboard focus.
- Make sure the user can interact with the file uploader and the drag-and-drop region. To give the input keyboard focus, use the
tabwhen tabbing backwards) To activate the input, use the
- Provide clear and informative error messaging to allow user to understand what he needs to do to rectify the problem.
|04/14/2022||1.3.0||Added new component.||L. Cook, E. Gunther, E. Nowak|
Was this page helpful?
Thanks for your feedback!