Skip to main contentCarbon Design System

File uploader

File uploaders allow users to select one or more files to upload to a specific location.

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

VariantWay it works
File uploaderUpload one or more files by clicking an action button that prompts a file selection dialog.
Drag and drop file uploaderDrag 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">
<FileUploader
accept={[
'.jpg',
'.png'
]}
buttonKind="primary"
buttonLabel="Add files"
filenameStatus="edit"
iconDescription="Clear file"
labelDescription="only .jpg files at 500mb or less"
labelTitle="Upload"
/>
</div>
FileUploader
Modifiers

Formatting

Anatomy

File uploader anatomy
  1. Heading: Text to describe the upload section.
  2. Description: Text to help the user make an informed selection.
  3. Button or drop zone label: The action to select a file to upload.
  4. Uploaded file: A file that has successfully been uploaded.
  5. 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 sizes
File uploader sizeHeight (px/rem)Use case
Large48/3Choose this size when there is a lot of space to work with.
Medium40/2.5This is our default size and should be used whenever possible.
Small32/2Use 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.

File uploader left alignment

Placement