File uploader – Carbon Design System

Preview the file uploader component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Live demo

Theme selector

Variant selector

Upload

only .jpg files at 500mb or less

Add files

CodeSandbox React Angular Vue Vanilla

Live editor for the File uploader component


      <div className="bx--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>


      <div className="bx--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>

Edit this page on GitHub

File uploader: Style

File uploader: Accessibility