Uploader
Upload files by clicking or drag-and-drop, it supports previewing the uploaded image.
Import
import { Uploader } from 'rsuite';Examples
Basic
The most basic file upload functionality, automatically uploads after selecting a file by clicking the button.
Picture
Display uploaded image files as thumbnails with preview capability.
Picture & text
Display both image thumbnails and file information in the upload list.
Avatar
Specifically designed for uploading a single file, such as an avatar.
Drag and drop
Supports drag-and-drop interaction for uploading files by dropping them into the specified area.
Initial file list
Display a list of already uploaded files with support for file preview and delete operations.
Custom file description
Customize the display content of file list items to show additional file information as needed.
Disabled and read only
Show the uploader component in disabled and read-only states.
Manually
Manually trigger the upload after selecting files, suitable for scenarios requiring user confirmation.
Controlled
Control the file list of the uploader component through external state, implementing a fully controlled upload flow.
File check
Demonstrates how to validate uploaded files for format, size, etc., to ensure they meet requirements.
Props
<Uploader>
Extends the props of the Button component.
| Property | Type (Default) |
Description |
|---|---|---|
| accept | string | File types that can be accepted. See HTML attribute: 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 | FileType[] | List of uploaded files |
| disableMultipart | boolean | If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form |
| disabled | boolean | Disabled upload button |
| disabledFileItem | boolean | Disabled the file list |
| draggable | boolean | Enabled drag and drop to upload. |
| fileList | FileType[] | 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 |
| locale | UploaderLocaleType | Define localization settings to show component text in the user's regional language |
| maxPreviewFileSize | number (5242880) |
Set the maximum limit for preview files |
| method | string ('POST') |
The http method of upload request |
| 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: FileType[], , event: ChangeEvent | MouseEvent) => void | callback function that the upload queue has changed |
| onError | (reason: object, file: FileType) => void | Upload callback function with error |
| onPreview | (file: FileType, event) => 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 |
| removable | boolean (true) |
Removable list file |
| renderFileInfo | (file: FileType, fileElement: ReactNode) => ReactNode | Custom render file information |
| renderThumbnail | (file: FileType, thumbnail: ReactNode) => ReactNode | Custom render thumbnail |
| shouldQueueUpdate | (fileList: FileType[], newFile: 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 |
| toggleAs | ElementType (Button) | You can use a custom element for this component |
| withCredentials | boolean | Whether to carry cookies when uploading requests |
FileType
interface FileType {
/** File Name */
name?: string;
/** File unique identifier */
fileKey?: number | string;
/** File upload status */
status?: 'inited' | 'uploading' | 'error' | 'finished';
/** File upload status */
progress?: number;
/** The url of the file can be previewed. */
url?: string;
}