@rc-component/upload

_{Part of the Ant Design ecosystem.}

📤 Low-level React upload primitive for Ajax, drag, paste, directory, and custom requests.

English | 简体中文

Highlights

• Supports Ajax uploads with progress, headers, credentials, and custom request overrides.
• Supports directory, drag, paste, async action, and before-upload flows.
• Exposes abort(file) through the component instance for active requests.
• Provides semantic classNames and styles slots for the hidden input.

Install

npm install @rc-component/upload

Usage

import Upload from '@rc-component/upload';

export default () => (
  <Upload
    action="/upload"
    onStart={file => {
      console.log('start', file.name);
    }}
    onSuccess={(response, file) => {
      console.log('success', file.name, response);
    }}
  >
    <button type="button">Upload</button>
  </Upload>
);

Online preview: https://upload.react-component.vercel.app/

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Upload

Name	Type	Default	Description
accept	string | AcceptConfig	-	Input accept config.
action	string | (file) => string | PromiseLike<string>	-	Upload URL or async resolver.
beforeUpload	(file, fileList) => BeforeUploadFileType | Promise<void | BeforeUploadFileType> | void	-	Validate or transform before upload. Return false to stop upload.
className	string	-	Root class name.
classNames	{ input?: string }	-	Semantic class names.
component	React.ComponentType | string	'span'	Root component.
customRequest	CustomUploadRequestOption	-	Override default request behavior.
data	object | (file) => object	{}	Extra upload data.
directory	boolean	false	Enable directory upload.
disabled	boolean	false	Disable upload trigger.
hasControlInside	boolean	false	Whether child already contains a control element.
headers	Record<string, string>	{}	Request headers.
id	string	-	Input id.
method	'POST' | 'PUT' | 'PATCH' | 'post' | 'put' | 'patch'	'post'	Request method.
multiple	boolean	false	Allow multiple file selection.
name	string	'file'	File field name.
onBatchStart	(fileList) => void	-	Called when a batch starts.
onError	(error, response, file) => void	-	Upload error callback.
onProgress	(event, file) => void	-	Upload progress callback.
onStart	(file) => void	-	Upload start callback.
onSuccess	(response, file, xhr) => void	-	Upload success callback.
openFileDialogOnClick	boolean	true	Open file dialog when root is clicked.
pastable	boolean	false	Enable paste upload.
prefixCls	string	'rc-upload'	Prefix class name.
style	React.CSSProperties	-	Root style.
styles	{ input?: React.CSSProperties }	-	Semantic styles.
withCredentials	boolean	false	Send credentials with Ajax upload.

Methods

Name	Type	Description
abort	(file: RcFile) => void	Abort an active upload.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/upload is released under the MIT license.