Uploader

Upload files by clicking or drag-and-drop, it supports previewing the uploaded image.

Import

MainIndividual
import { Uploader } from 'rsuite';

Examples

Basic

Picture

Picture & text

Avatar

Drag and drop

Initial file list

Custom file description

Disabled and read only

Manually

Controlled

File check

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;
}
Vercel banner