FileUploader

FileUploader UI Component

Installation

npm i @synerise/ds-file-uploader

or

yarn add @synerise/ds-file-uploader

Usage

import FileUploader from '@synerise/ds-file-uploader'

<FileUploader

mode="single"

filesAmount={1}

files={[]}

accept={['image/png']}

texts={{

buttonLabel: 'Upload a new file',

buttonDescription: 'or drag one here',

size: 'Size:',

uploading: 'Uploading...',

}}

onUpload={files => processFiles(files)}

/>

Demo

FileUploader

Property	Description	Type	Default
mode	uploader operation mode	single / multi-medium / multi-large	single
mode	uploader maximum files number	number	-
description	description shown with uploader	string	-
disabled	whether the uploader should be disabled	boolean	-
removable	whether or not files should be removable	boolean	-
label	label shown on top of the uploader	string	-
infoTooltip	display a tooltip near the label (label value is required for tooltip to appear)	string	-
error	display general error	string	-
texts	texts to display	FileUploaderTexts	-
files	uploaded files	ExtendedFile[]	-
accept	accepted mime types to upload	string[]	-
onRemove	event fired when a file is removed	(file: File, index: number) => void	-
onUpload	event fired when a file is removed	(files: File[]) => void	-

ExtendedFile

Property	Description	Type	Default
file	actual file	FileWithContent	-
disabled	whether or not the file should be disabled	boolean	-
error	file error text	string	-
progress	upload progress	number	-
success	upload success	boolean	-

FileWithContent (extends File)

Property	Description	Type	Default
content	Plain text of txt files, for other file types contains null	string, null, ArrayBuffer	null

FileUploaderTexts

Property	Description	Type	Default
buttonLabel	upload button label	string / React.ReactNode	-
buttonDescription	upload button description	string / React.ReactNode	-
size	file size label	string / React.ReactNode	-
uploading	text to display when uploading a file	string / React.ReactNode	-