FileInputArea

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.

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

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:

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

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:

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

Alert state

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

Disabled

<FileInputArea disabled ... />

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

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

Sandbox

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

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>
  );
}