Carbon Design System

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

Theme selector

Variant selector

CodeSandbox React Angular Vue Web Components

Live editor for the File uploader component


      <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>

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.

File uploader