Bifrost Design System

Design React

Figma

import FileInputArea from "@intility/bifrost-react/FileInputArea";

FileInputArea

Go to top

Props

Also see /react/examples/singleFileUpload

Single file upload

Also see /react/examples/multipleFileUpload

Multiple file upload

Basic usage

If you don't have a visible label, supply an aria-label for screen readers.

Mark text that should get underlined on hover with .bf-neutral-link-text.

TSX

<FileInputArea aria-label="Upload file">
  Drag & drop file or
  <span className="bf-neutral-link-text">click to upload</span>
</FileInputArea>

Drag & drop file or click to upload

Area content

We recommend filling the droppable area with a .bfc-base-2 colored faArrowUpFromBracket icon and information about how and what you can do:

TSX

<FileInputArea aria-label="Upload file">
  <Icon
    icon={faArrowUpFromBracket}
    className="bfc-base-2"
    style={{ marginBottom: 8 }}
  />
  <div>
    Drag & drop file or{" "}
    <span className="bf-neutral-link-text">click to upload</span>
  </div>
  <div className="bfc-base-2">.csv file, less than 10 MB</div>
</FileInputArea>

Drag & drop file or click to upload

.csv file, less than 10 MB

Visible label

If you want a visible label, you can omit aria-label and instead give the <FileInputArea> a unique id and connect it to the <Label> with htmlFor:

TSX

<Label htmlFor="my-file-input-area">Upload file</Label>
<FileInputArea id="my-file-input-area" ... />

Upload file

Drag & drop file or click to upload

.csv file, less than 10 MB

Alert state

TSX

<FileInputArea state="alert" ... />

Drag & drop file or click to upload

.csv file, less than 10 MB

Disabled

TSX

<FileInputArea disabled ... />

Drag & drop file or click to upload

.csv file, less than 10 MB

If you have a <Label>, mark that as disabled as well:

TSX

<Label disabled htmlFor="disabled-file-input-area">Upload file</Label>
<FileInputArea disabled id="disabled-file-input-area" ... />

Upload file

Drag & drop file or click to upload

.csv file, less than 10 MB

Sandbox

This demo does not handle file input events, see single file upload example for how to handle file selection.

Open Sandbox

import { useId } from "react";
import { faArrowUpFromBracket } from "@fortawesome/free-solid-svg-icons/faArrowUpFromBracket";
import FileInputArea from "@intility/bifrost-react/FileInputArea";
import Icon from "@intility/bifrost-react/Icon";
import Label from "@intility/bifrost-react/Label";

export default function FileInputAreaDemo() {
  const id = useId();
  return (
    <div className="bf-padding">
      <Label htmlFor={id}>Upload file</Label>
      <FileInputArea id={id}>
        <Icon
          icon={faArrowUpFromBracket}
          className="bfc-base-2"
          style={{ marginBottom: 8 }}
        />
        <div>
          Drag & drop file or{" "}
          <span className="bf-neutral-link-text">click to upload</span>
        </div>
        <div className="bfc-base-2">.csv file, less than 10 MB</div>
      </FileInputArea>
    </div>
  );
}