File uploader

• Overview
• Live demo
• Interactions
• Upload state
• Removing files
• Feedback

Overview

• A file uploader is commonly found in forms, but they can also live as stand alone elements.
• Add files is the default text that appears with the file uploader.
• A file uploader should always be accompanied by Submit or Upload, which is to be styled as a Primary Button.
• Use an ellipsis (…) if the filename extends beyond the width of its parent element.

Live demo

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

Interactions

1. The user may select 1 or more files to upload at a time. By default, any file type is accepted, but you can add parameters to validate a specific file type.
2. The action of clicking Add files will trigger a browser-specific upload window.
3. Once the user chooses files to upload, the browser-specific upload window closes and the files will appear below the Add files button.
4. User clicks Submit or Upload to submit their data.
5. Any errors that may occur with the file should appear as an inline error Notification.

Upload state

Removing files

Feedback