115 lines
4.4 KiB
Markdown
115 lines
4.4 KiB
Markdown
# @rc-component/upload
|
|
|
|
React Upload
|
|
|
|
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url] [![dumi][dumi-image]][dumi-url]
|
|
|
|
[npm-image]: http://img.shields.io/npm/v/@rc-component/upload.svg?style=flat-square
|
|
[npm-url]: http://npmjs.org/package/@rc-component/upload
|
|
[travis-image]: https://img.shields.io/travis/react-component/upload/master?style=flat-square
|
|
[travis-url]: https://travis-ci.com/react-component/upload
|
|
[github-actions-image]: https://github.com/react-component/upload/actions/workflows/react-component-ci.yml/badge.svg
|
|
[github-actions-url]: https://github.com/react-component/upload/actions/workflows/react-component-ci.yml
|
|
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/upload/master.svg?style=flat-square
|
|
[codecov-url]: https://app.codecov.io/gh/react-component/upload
|
|
[download-image]: https://img.shields.io/npm/dm/@rc-component/upload.svg?style=flat-square
|
|
[download-url]: https://npmjs.org/package/@rc-component/upload
|
|
[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/upload
|
|
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/upload
|
|
[dumi-url]: https://github.com/umijs/dumi
|
|
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
|
|
|
## Development
|
|
|
|
```
|
|
npm install
|
|
npm start
|
|
```
|
|
|
|
## Example
|
|
|
|
http://localhost:8000/
|
|
|
|
online example: https://upload.react-component.vercel.app/
|
|
|
|
## Feature
|
|
|
|
- support IE11+, Chrome, Firefox, Safari
|
|
|
|
## install
|
|
|
|
[](https://npmjs.org/package/@rc-component/upload)
|
|
|
|
## Usage
|
|
|
|
```js
|
|
var Upload = require('@rc-component/upload');
|
|
var React = require('react');
|
|
React.render(<Upload />, container);
|
|
```
|
|
|
|
## API
|
|
|
|
### props
|
|
|
|
| name | type | default | description |
|
|
| --- | --- | --- | --- |
|
|
| name | string | file | file param post to server |
|
|
| style | object | {} | root component inline style |
|
|
| className | string | - | root component className |
|
|
| disabled | boolean | false | whether disabled |
|
|
| component | "div" \| "span" | "span" | wrap component name |
|
|
| action | string | function(file): string | Promise<string> | | form action url |
|
|
| method | string | post | request method |
|
|
| directory | boolean | false | support upload whole directory |
|
|
| data | object/function(file) | | other data object to post or a function which returns a data object(a promise object which resolve a data object) |
|
|
| headers | object | {} | http headers to post, available in modern browsers |
|
|
| accept | string | | input accept attribute |
|
|
| capture | string | | input capture attribute |
|
|
| multiple | boolean | false | only support ie10+ |
|
|
| onStart | function | | start upload file |
|
|
| onError | function | | error callback |
|
|
| onSuccess | function | | success callback |
|
|
| onProgress | function | | progress callback, only for modern browsers |
|
|
| beforeUpload | function | null | before upload check, return false or a rejected Promise will stop upload, only for modern browsers |
|
|
| customRequest | function | null | provide an override for the default xhr behavior for additional customization |
|
|
| withCredentials | boolean | false | ajax upload with cookie send |
|
|
| openFileDialogOnClick | boolean | true | useful for drag only upload as it does not trigger on enter key or click event |
|
|
| pastable | boolean | false | support paste upload |
|
|
|
|
#### onError arguments
|
|
|
|
1. `err`: request error message
|
|
2. `response`: request response, not support on iframeUpload
|
|
3. `file`: upload file
|
|
|
|
### onSuccess arguments
|
|
|
|
1. `result`: response body
|
|
2. `file`: upload file
|
|
3. `xhr`: xhr header, only for modern browsers which support AJAX upload. since 2.4.0
|
|
|
|
### customRequest
|
|
|
|
Allows for advanced customization by overriding default behavior in AjaxUploader. Provide your own XMLHttpRequest calls to interface with custom backend processes or interact with AWS S3 service through the aws-sdk-js package.
|
|
|
|
customRequest callback is passed an object with:
|
|
|
|
- `onProgress: (event: { percent: number }): void`
|
|
- `onError: (event: Error, body?: Object): void`
|
|
- `onSuccess: (body: Object): void`
|
|
- `data: Object`
|
|
- `filename: String`
|
|
- `file: File`
|
|
- `withCredentials: Boolean`
|
|
- `action: String`
|
|
- `headers: Object`
|
|
|
|
### methods
|
|
|
|
abort(file?: File) => void: abort the uploading file
|
|
|
|
## License
|
|
|
|
@rc-component/upload is released under the MIT license.
|