Uploader
<Uploader>
Usage
import { Uploader } from 'rsuite';Examples
Default
Picture
Picture & text
Avatar
Drag and drop
Initial file list
Custom file description
Disabled
Manually
Controlled
File check
Props
<Uploader>
| Property | Type (Default) |
Description |
|---|---|---|
| accept | string | File types that can be accepted. See input accept Attribute |
| action * | string | Uploading URL |
| autoUpload | boolean (true) |
Automatically upload files after selecting them |
| classPrefix | string ('uploader') |
The prefix of the component CSS class |
| data | Object | Upload the parameters with |
| defaultFileList | Array |
List of uploaded files |
| disabled | boolean | Disabled upload button |
| disabledFileItem | boolean | Disabled the file list |
| draggable | boolean | Enabled drag and drop to upload. |
| fileList | Array |
List of uploaded files （Controlled） |
| fileListVisible | boolean(true) |
The file list is visible |
| headers | Object | Set Upload request Header |
| listType | menu: 'text' , 'picture-text' , 'picture' ('text') |
Upload list Style |
| maxPreviewFileSize | number (5242880) |
Set the maximum limit for preview files |
| multiple | boolean | Allow multiple file uploads to be selected at a time |
| name | string ('file') |
Upload the parameter name of the corresponding file |
| onChange | (fileList: Array<FileType>) => void | callback function that the upload queue has changed |
| onError | (reason: Object, file: FileType) => void | Upload callback function with error |
| onPreview | (file: FileType, event: SyntheticEvent<any>) => void | In the file list, click the callback function for the uploaded file |
| onProgress | (percent: number, file: FileType) => void | Callback functions that upload progress changes |
| onRemove | (file: FileType) => void | In the file list, click the callback function to delete a file |
| onReupload | (file: FileType) => void | In the file list, for uploading failed files, click the callback function to upload |
| onSuccess | (response: Object, file: FileType) => void | callback function after successful upload |
| onUpload | (file: FileType) => void | The callback function that starts the upload file |
| renderFileInfo | (file: FileType, fileElement: React.Node) => React.Node | Custom render file information |
| removable | boolean (true) |
Removable list file |
| shouldQueueUpdate | (fileList: Array<FileType>, newFile: Array<FileType>, FileType) => boolean | Promise<boolean> | Allow the queue to be updated. After you select a file, update the checksum function before the upload file queue, and return false to not update |
| shouldUpload | (file: FileType) => boolean | Promise<boolean> | Allow uploading of files. Check function before file upload, return false without uploading |
| timeout | number | Set upload timeout |
| toggleComponentClass | React.ElementType ('button') |
You can use a custom element for this component |
| withCredentials | boolean | Whether to carry cookies when uploading requests |