File uploader
File uploaders allow users to select one or more files to upload to a specific location.
- Overview
- Live demo
- Formatting
- Content
- Universal behaviors
- File uploader
- Drag and drop file uploader
- References
- Feedback
Overview
File uploaders allow users to upload content of their own. A file uploader is commonly found in forms, but can also live as a standalone element. There are two variants of file uploaders—our default file uploader and a drag and drop file uploader.
Variants
Variant | Way it works |
---|---|
File uploader | Upload one or more files by clicking an action button that prompts a file selection dialog. |
Drag and drop file uploader | Drag and drop selected files directly into a drop zone area to upload. |
When to use
- Uploading one or more files.
- Uploading files by dragging and dropping.
- Showing the process of uploading.
When not to use
- Do not use upload in a modal when multiple files are uploaded, as uploaded files stack vertically.
Live demo
<div className="cds--file__container"><FileUploaderaccept={['.jpg','.png']}buttonKind="primary"buttonLabel="Add files"filenameStatus="edit"iconDescription="Clear file"labelDescription="only .jpg files at 500mb or less"labelTitle="Upload"/></div>
Formatting
Anatomy

- Heading: Text to describe the upload section.
- Description: Text to help the user make an informed selection.
- Button or drop zone label: The action to select a file to upload.
- Uploaded file: A file that has successfully been uploaded.
- x: The delete
x
icon will remove the uploaded file.
Sizing
The button and uploaded files should be the same height. If the file uploader is present in a form with other inputs, use the same height for the form inputs and the file uploader for consistency.

File uploader size | Height (px/rem) | Use case |
---|---|---|
Large | 48/3 | Choose this size when there is a lot of space to work with. |
Medium | 40/2.5 | This is our default size and should be used whenever possible. |
Small | 32/2 | Use when space is constricted or when placing a file uploader in a form that is long and complex. |
Alignment
Left align the button or drop zone area with the uploaded files. Multiple files will stack vertically.
