FileInputArea
Drag and drop area for files
import FileInputArea from "@intility/bifrost-react/FileInputArea";FileInputArea
Go to top
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>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" ... />Alert state
TSX
<FileInputArea state="alert" ... />Disabled
TSX
<FileInputArea disabled ... />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" ... />