Part of the Ant Design ecosystem.
đ¤ Low-level React upload primitive for Ajax, drag, paste, directory, and custom requests.
English | įŽäŊä¸æ
- 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
classNamesandstylesslots for the hidden input.
npm install @rc-component/upload
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/
Run the local dumi site:
npm install npm start
Then open http://localhost:8000.
| 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. |
| Name | Type | Description |
|---|---|---|
abort |
(file: RcFile) => void |
Abort an active upload. |
retry |
(file: RcFile) => void |
Retry an upload for a specific file. |
npm install
npm start
npm test
npm run tsc
npm run compile
npm run buildThe dumi site runs at http://localhost:8000 by default.
npm run prepublishOnly
The release flow is handled by @rc-component/np through the rc-np command after the package build.
@rc-component/upload is released under the MIT license.