diff --git a/README.md b/README.md index 8a1cfd88..be006c58 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,8 @@ React.render(, container); |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| +|beforeUpload| function(file,fileList) |null| before upload check, if multiple is true, each file will be triggered once, return false or a rejected Promise will stop upload, only for modern browsers | +|beforeMultipleUpload | function(fileList) |null| before upload check, different from beforeUpload, it will only trigger once, 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 | diff --git a/examples/beforeMultipleUpload.html b/examples/beforeMultipleUpload.html new file mode 100644 index 00000000..48cdce85 --- /dev/null +++ b/examples/beforeMultipleUpload.html @@ -0,0 +1 @@ +placeholder diff --git a/examples/beforeMultipleUpload.js b/examples/beforeMultipleUpload.js new file mode 100644 index 00000000..b892aa64 --- /dev/null +++ b/examples/beforeMultipleUpload.js @@ -0,0 +1,45 @@ +/* eslint no-console:0 */ + +import React from 'react'; +import ReactDOM from 'react-dom'; +import Upload from 'rc-upload'; + +const props = { + action: '/upload.do', + multiple: true, + onStart(file) { + console.log('onStart', file, file.name); + }, + onSuccess(ret) { + console.log('onSuccess', ret); + }, + onError(err) { + console.log('onError', err); + }, + beforeMultipleUpload(fileList) { + console.log(fileList); + return new Promise((resolve) => { + console.log('start check'); + setTimeout(() => { + console.log('check finshed'); + resolve(fileList); + }, 3000); + }); + }, +}; + +const Test = () => { + return ( +
+
+ 开始上传 +
+
+ ); +}; + +ReactDOM.render(, document.getElementById('__react-content')); diff --git a/src/AjaxUploader.jsx b/src/AjaxUploader.jsx index 638c90f1..0922b9ee 100644 --- a/src/AjaxUploader.jsx +++ b/src/AjaxUploader.jsx @@ -1,4 +1,5 @@ /* eslint react/no-is-mounted:0,react/sort-comp:0,react/prop-types:0 */ +/* eslint no-shadow: 0 */ import React, { Component } from 'react'; import classNames from 'classnames'; import defaultRequest from './request'; @@ -86,36 +87,68 @@ class AjaxUploader extends Component { } uploadFiles = (files) => { + const { props } = this; const postFiles = Array.prototype.slice.call(files); - postFiles - .map(file => { - file.uid = getUid(); - return file; - }) - .forEach(file => { + postFiles.forEach((file) => { + file.uid = getUid(); + }); + if (props.beforeMultipleUpload) { + this.upload(null, postFiles); + } else { + postFiles.forEach((file) => { this.upload(file, postFiles); }); + } }; upload(file, fileList) { const { props } = this; - if (!props.beforeUpload) { + if (props.beforeMultipleUpload) { + const beforeMultiple = props.beforeMultipleUpload(fileList); + if (beforeMultiple && beforeMultiple.then) { + beforeMultiple + .then((processedFiles) => { + const isProcessedFilesTypeCorrect = processedFiles.every((processedFile) => { + const processedFileType = Object.prototype.toString.call(processedFile); + return processedFileType === '[object File]' || processedFileType === '[object Blob]'; + }); + if (isProcessedFilesTypeCorrect) { + processedFiles.forEach((processedFile) => { + this.post(processedFile); + }); + } else { + fileList.forEach((file) => { + this.post(file); + }); + } + }) + .catch((e) => { + console && console.log(e); // eslint-disable-line + }); + } else if (beforeMultiple !== false) { + fileList.forEach((file) => { + setTimeout(() => this.post(file), 0); + }); + } + } else if (props.beforeUpload) { + const before = props.beforeUpload(file, fileList); + if (before && before.then) { + before + .then((processedFile) => { + const processedFileType = Object.prototype.toString.call(processedFile); + if (processedFileType === '[object File]' || processedFileType === '[object Blob]') { + return this.post(processedFile); + } + return this.post(file); + }) + .catch((e) => { + console && console.log(e); // eslint-disable-line + }); + } else if (before !== false) { + setTimeout(() => this.post(file), 0); + } + } else { // always async in case use react state to keep fileList - return setTimeout(() => this.post(file), 0); - } - - const before = props.beforeUpload(file, fileList); - if (before && before.then) { - before.then((processedFile) => { - const processedFileType = Object.prototype.toString.call(processedFile); - if (processedFileType === '[object File]' || processedFileType === '[object Blob]') { - return this.post(processedFile); - } - return this.post(file); - }).catch(e => { - console && console.log(e); // eslint-disable-line - }); - } else if (before !== false) { setTimeout(() => this.post(file), 0); } } diff --git a/src/Upload.jsx b/src/Upload.jsx index 098a2c5c..fdfef852 100644 --- a/src/Upload.jsx +++ b/src/Upload.jsx @@ -19,6 +19,7 @@ class Upload extends Component { onSuccess: empty, multiple: false, beforeUpload: null, + beforeMultipleUpload: null, customRequest: null, withCredentials: false, openFileDialogOnClick: true,