Uploader

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

Import 

import { Uploader } from 'rsuite';

// or
import Uploader from 'rsuite/Uploader';

Examples

Default

Picture

Picture & text

Avatar

Drag and drop

Initial file list

Custom file description

Disabled and read only

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 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 Locale text
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: 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) => 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: React.ReactNode) => React.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

ts: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;
}