File Upload
The FileUpload component is responsible for creating a dropzone/upload button and configuration file selection options.
import { FileUpload, Files, File, fileSizeInKiloBytes, fileSizeInMegaBytes, fileSizeInGigaBytes, convertBytesToKiloBytes, convertBytesToMegaBytes, convertBytesToGigaBytes } from '@balance-web/file-upload';FileUpload
The FileUpload component is responsible for creating a dropzone/upload button and configuration file selection options.
title
Title of the container.
description
An optional description for additional information such as the types and sizes of files allowed.
onFilesSelected
Emits an event when the user selects files. This package does not own the state of the files so it's the consumers responsibility to store them somewhere.
<FileUpload
onFilesSelected={(newFiles) => {
/* stores files somewhere */
}}
/>inlineDropZone
By default, the container will contain a button that can be used to upload files.
When inlineDropZone=true, the button will be replaced with a drop zone where users can drag/drop files or simply click on it to select files.
windowDropZone
Optionally, make the entire screen a drop target.
Note: There can only be a single instance of FileUpload with windowDropZone=true.
multiple
Allows the user to select/drop multiple files at a time when true and only a single file at a time when false.
Default value is true.
accept
Sets the type of files that can be selected. Multiple types can be accepted via a comma separated string.
See this link for acceptable types.
disabled
Prevents the user from adding files.
Files
The Files component can be used to render the list of files the user has selected.
orientation
Sets the orientation of the file as vertical or horizontal.
<Files orientation="vertical" />Default value is horizontal.
File
Presents a single file to the user, along with some optional controls. The primitive should only be used inside Files.
name
The name of the file.
The name will be truncated after 27 characters.
onOpenClick
An optional prop intended to let the user view a file. When onOpenClick is provided, the name of the file becomes clickable.
Note: This component does not have opinions on how the file is retrieved and presented to the user, that is up to the consumer.
onRemoveClick
An optional prop intended to let the user remove a file. When onRemoveClick is provided, a cross icon button is displayed.
Note: This component does not have opinions on how the file is maintained in state and removed, that is up to the consumer.
loading
An optional prop to show a loading indicator for a file.
The onOpenClick and onRemoveClick props will not working while loading=true i.e the file will not be interactive.
invalidMessage
An optional prop to display validation or upload errors to the user.
Working with file sizes
Two paired sets of helpers, for converting between raw bytes (what a
browser File's .size reports) and human-scale units:
fileSizeInKiloBytes/fileSizeInMegaBytes/fileSizeInGigaBytes(n)convert a unit value to bytes — useful for size-limit checks, e.g.file.size > fileSizeInMegaBytes(1)to reject anything over 1MB (see the drop zone recipe below).convertBytesToKiloBytes/convertBytesToMegaBytes/convertBytesToGigaBytes(bytes)convert the other way — useful for displaying a file's size to the user.