Bifrost Design System

Multiple file upload

Go to top

Also see /react/fileinputarea

React component

Also see /react/examples/singleFileUpload

Single file upload example

Handling events

You can use the onInput event on <FileInputArea> to handle selected files.

Use the multiple prop to allow selecting multiple files at the same time.

TSX

<FileInputArea
  multiple
  onInput={(e) => {
    const files = e.currentTarget.files;
    if (!files || !files.length) return;
    // add files to selected list...
  }}
/>

Area content

TSX

<FileInputArea multiple aria-label="Upload file" onInput={...}>
  <Icon
    icon={faArrowUpFromBracket}
    className="bfc-base-2"
    style={{ marginBottom: 8 }}
  />
  <div>
    Drag & drop file(s) or{" "}
    <span className="bf-neutral-link-text">click to upload</span>
  </div>
  <div className="bfc-base-2">PDF only</div>
</FileInputArea>

Drag & drop file(s) or click to upload

PDF only

List of files

Selected files can be displayed below the input field, with a loading spinner while uploading.

We've added a disabled<Button> here so it will take up the same space as the remove button later.

TSX

<Button small disabled noPadding>
  <Icon.Spinner />
</Button>{" "}
uploading_file.jpg

When the upload completes, swap to a faXMark icon button to remove. Adding a tooltip for clarity is also a good idea:

TSX

<Tooltip content="Remove">
  <Button onClick={/* remove file */} variant="flat" small pill noPadding>
    <Icon icon={faXmark} />
  </Button>
</Tooltip>{" "}
uploaded_file.png

If the upload failed, you can include a red faCircleExclamation icon and a faRefresh icon button to retry:

TSX

<Tooltip content="Remove">
  <Button onClick={/* remove file */} variant="flat" small pill noPadding>
    <Icon icon={faXmark} />
  </Button>
</Tooltip>{" "}
<Tooltip content="Could not upload file">
  <Icon icon={faCircleExclamation} className="bfc-alert" marginRight />
</Tooltip>
upload_failed.png{" "}
<Tooltip content="Retry">
  <Button small onClick={/* re-upload */} variant="flat" noPadding pill>
    <Icon icon={faRefresh} />
  </Button>
</Tooltip>

uploading_file.jpg

uploaded_file.png

upload_failed.png

Interactive demo

This simulation lets you select some files, fake uploading for ~1s with a 10% chance to fail.

Drag & drop file(s) or click to upload

PDF only