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
- Label
- Input element
- List of files to upload
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
- A secondary button
- An icon representing the type of file to upload
- List of files to upload
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
- Label
- Listof files to upload
- Filename
- Filesize
- Action for file
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 feedback
- File icon
- File name
- File action
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.
- Image from iOS.jpg 53.65KB
- Image from iOS.jpg 53.65KB
- Image from iOS.jpg 53.65KB
- Image from iOS.jpg Upload failed
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.