@synerise/ds-file-uploader v1.0.12
id: file-uploader
title: 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 | - |
5 months ago
5 months ago
5 months ago
3 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
3 months ago
3 months ago
3 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
6 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago