diff --git a/README.md b/README.md index 74906767..485cab6d 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ online example: https://upload.react-component.vercel.app/ ## Feature -* support IE11+, Chrome, Firefox, Safari +- support IE11+, Chrome, Firefox, Safari ## install @@ -54,29 +54,29 @@ React.render(, container); ### 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 | +| 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 | #### onError arguments @@ -88,9 +88,7 @@ React.render(, container); 1. `result`: response body 2. `file`: upload file -3. `xhr`: xhr header, only for modern browsers which support AJAX upload. since - 2.4.0 - +3. `xhr`: xhr header, only for modern browsers which support AJAX upload. since 2.4.0 ### customRequest @@ -98,21 +96,22 @@ Allows for advanced customization by overriding default behavior in AjaxUploader 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` - +- `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 +showOpenFilePicker() => void: open file picker + ## License rc-upload is released under the MIT license. diff --git a/src/AjaxUploader.tsx b/src/AjaxUploader.tsx index caa7b7d1..ae028335 100644 --- a/src/AjaxUploader.tsx +++ b/src/AjaxUploader.tsx @@ -41,6 +41,10 @@ class AjaxUploader extends Component { this.reset(); }; + showOpenFilePicker = () => { + this.fileInput?.click(); + }; + onClick = (e: React.MouseEvent | React.KeyboardEvent) => { const el = this.fileInput; if (!el) { diff --git a/src/Upload.tsx b/src/Upload.tsx index 548aca17..9ac9b05a 100644 --- a/src/Upload.tsx +++ b/src/Upload.tsx @@ -29,6 +29,10 @@ class Upload extends Component { this.uploader.abort(file); } + showOpenFilePicker() { + this.uploader.showOpenFilePicker(); + } + saveUploader = (node: AjaxUpload) => { this.uploader = node; };