Balance Logo
Balance
Reckon Design System

File Upload

Used to upload files.
Install
pnpm add @reckon-web/file-upload
Import usage
import {
FileUpload,
Files,
File,
fileSizeInKiloBytes,
fileSizeInMegaBytes,
fileSizeInGigaBytes
} from '@reckon-web/file-upload';
  • Code
  • API

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 */
}}
/>

dropZone

By default, the container will contain a button that can be used to upload files.

When dropZone=true, the button will be replaced with a drop zone where users can drag/drop files or simply click on it to select files.

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.

Edit in Playroom

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.

Receipes

Simple file upload with upload button

Drop zone with file restrictions

View a list of files

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo