File Upload
The File Upload Component provides an easy and integrated way for users to upload multiple files. You can configure the file uploader to accept specific file types, and the file types are filtered in the user's file browser
Table of Contents
Edit this section, Opens in new windowOverview
A file-upload component enables users to upload files to your service.
Variations
Type | Purpose |
---|---|
Input | Upload one or more files by using an input field. |
Button | Upload one or more files by clicking an action button that prompts a file selection dialog. |
Drag and drop | Drag and drop selected files directly into a drop zone area to upload. |
Input
A file picker lets people browse files from device storage to choose a file or files to upload them to our products.
Usage
Sizing
The input file-upload follows the same standard in sizing as the input field component.
Behaviours
Interactions
Focus
Static
Complete
Modifiers
Disabled
Invalid
Anatomy
Specs
Button
A file picker lets people browse files from device storage to choose a file or files to upload them to our products.
The main difference between this version and input is that the file upload component is styled like a button.
Anatomy
Specs
Drag and drop
A drag-and-drop file upload lets people drag a file or files from their device to an area of the interface (a "drop zone") to upload them to your service.
Behaviours
Interactions
Focus
Modifiers
Static
Complete
Anatomy
Specs
File list
The file list contains these elements:
- A file feedback (size or error message)
- A file icon
- An action
- A file name
File name
The name of the file to be uploaded. If the file name is too long, it is truncated with ellipsis. Users can hover over the file name to get the full name.
File action
The file action depicts the current action that's available for the file that is uploading or is to be uploaded.
Delete
If there applies a feature to delete specific files before upload, or after a file is uploaded, you can use this icon and relevant action to delete the file.