Skip to content

Commit

Permalink
feat(uploader): support file async check on Uploader (#1509)
Browse files Browse the repository at this point in the history
  • Loading branch information
@simonguo
simonguo committed Feb 23, 2021
1 parent d66f225 commit 4726c5a
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 88 deletions.
70 changes: 37 additions & 33 deletions docs/pages/components/uploader/en-US/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,40 +48,44 @@

<!--{include:`controlled.md`}-->

### File check

<!--{include:`check.md`}-->

## 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 |
| 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 |
| 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 |
| renderFileInfo | (file: FileType, fileElement: ReactNode) => ReactNode | Custom render file information |
| removable | boolean `(true)` | Removable list file |
| shouldQueueUpdate | (fileList: FileType[], newFile: FileType[], FileType) => 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 | 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 |
| 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 |
| 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 |
| 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 |
| renderFileInfo | (file: FileType, fileElement: ReactNode) => ReactNode | Custom render file information |
| removable | boolean `(true)` | Removable list file |
| shouldQueueUpdate | (fileList: FileType[], newFile: FileType[], FileType) => boolean &#124; Promise&lt;boolean&gt; | 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 &#124; Promise&lt;boolean&gt; | 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 |
49 changes: 49 additions & 0 deletions docs/pages/components/uploader/fragments/check.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!--start-code-->

```js
const App = () => {
const [loading, setLoading] = React.useState(false);
return (
<div>
<Uploader
action="//jsonplaceholder.typicode.com/posts/"
shouldQueueUpdate={() => {
alert('The file is checked and allowed to be added to the queue');
return true;
}}
shouldUpload={() => {
alert('File check passed, run upload');
return true;
}}
/>
<hr />
<Uploader
action="//jsonplaceholder.typicode.com/posts/"
shouldQueueUpdate={fileList => {
setLoading(true);
return new Promise(resolve => {
setTimeout(() => {
alert('The file is checked and allowed to be added to the queue');
resolve(true);
}, 2000);
});
}}
shouldUpload={file => {
return new Promise(resolve => {
setTimeout(() => {
alert('File check passed, run upload');
resolve(true);
setLoading(false);
}, 2000);
});
}}
>
<Button loading={loading}>Upload via async check</Button>
</Uploader>
</div>
);
};
ReactDOM.render(<App />);
```

<!--end-code-->
13 changes: 0 additions & 13 deletions docs/pages/components/uploader/fragments/custom-toggle.md
View file

This file was deleted.

1 comment on commit 4726c5a

@vercel
Copy link

@vercel vercel bot commented on 4726c5a Feb 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

rsuite-next – ./

rsuite-next-rsuite.vercel.app
rsuite-next-git-next-rsuite.vercel.app
rsuite-next.vercel.app
next.rsuitejs.com
rsuite-next-git-next.rsuite.vercel.app
rsuite-next.rsuite.vercel.app

Please sign in to comment.