feat: data function support return promise(#22529) (#253)

Author: kerm1it

README.md

@@ -61,7 +61,7 @@ React.render(<Upload />, container);
 |action| string &#124; function(file): string &#124; Promise&lt;string&gt; | | 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 |
+|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 |
 |multiple | boolean | false | only support ie10+|

src/AjaxUploader.jsx

@@ -125,31 +125,29 @@ class AjaxUploader extends Component {
       return;
     }
     const { props } = this;
-    let { data } = props;
     const {
       onStart,
       onProgress,
       transformFile = (originFile) => originFile,
     } = props;
 
     new Promise(resolve => {
-      const { action } = props;
+      let { data, action } = props;
       if (typeof action === 'function') {
-        return resolve(action(file));
+        action = action(file);
       }
-      resolve(action);
-    }).then(action => {
+      if (typeof data === 'function') {
+        data = data(file);
+      }
+      resolve(Promise.all([action, data]));
+    }).then(([action, data]) => {
       const { uid } = file;
       const request = props.customRequest || defaultRequest;
       const transform = Promise.resolve(transformFile(file)).catch(e => {
         console.error(e); // eslint-disable-line no-console
       });
 
       transform.then((transformedFile) => {
-        if (typeof data === 'function') {
-          data = data(file);
-        }
-
         const requestOption = {
           action,
           filename: props.name,

tests/uploader.spec.js

@@ -338,15 +338,22 @@ describe('uploader', () => {
       });
     });
 
-    it('support action is function returns Promise', done => {
+    it('support action and data is function returns Promise', done => {
       const action = () => {
         return new Promise(resolve => {
           setTimeout(() => {
             resolve('/upload.do');
           }, 1000);
         });
       };
-      ReactDOM.render(<Uploader action={action} />, node, function init() {
+      const data = () => {
+        return new Promise(resolve => {
+          setTimeout(() => {
+            resolve({ field1: 'a' });
+          }, 1000);
+        });
+      };
+      ReactDOM.render(<Uploader data={ data } action={action} />, node, function init() {
         uploader = this;
         const input = TestUtils.findRenderedDOMComponentWithTag(uploader, 'input');
         const files = [
@@ -365,6 +372,7 @@ describe('uploader', () => {
             console.log(requests);
             expect(requests.length).to.be(1);
             expect(requests[0].url).to.be('/upload.do');
+            expect(requests[0].requestBody.get('field1')).to.be('a');
             done();
           }, 1000);
         }, 100);