fix: transformFile should be called before data function(#24653) (#255)

Author: kerm1it

src/AjaxUploader.jsx

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

tests/uploader.spec.js

@@ -374,7 +374,7 @@ describe('uploader', () => {
             expect(requests[0].url).to.be('/upload.do');
             expect(requests[0].requestBody.get('field1')).to.be('a');
             done();
-          }, 1000);
+          }, 2000);
         }, 100);
       });
     });
@@ -469,6 +469,53 @@ describe('uploader', () => {
       ReactDOM.unmountComponentAtNode(node);
     });
 
+    it('transform file function should be called before data function', done => {
+      const props = {
+        action: '/test',
+        data (file) {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              resolve({
+                url: file.url
+              })
+            }, 500)
+          })
+        },
+        transformFile (file) {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              file.url = 'this is file url';
+              resolve(file);
+            }, 500);
+          });
+        },
+      };
+      ReactDOM.render(<Uploader {...props} />, node, function init() {
+        uploader = this;
+        const input = TestUtils.findRenderedDOMComponentWithTag(uploader, 'input');
+
+        const files = [
+          {
+            name: 'success.png',
+            toString() {
+              return this.name;
+            },
+          },
+        ];
+
+        files.item = i => files[i];
+
+        Simulate.change(input, { target: { files } });
+
+        setTimeout(() => {
+          setTimeout(() => {
+            expect(requests[0].requestBody.get('url')).to.be('this is file url');
+            done();
+          }, 1000);
+        }, 100);
+      });
+    });
+
     it('noes not affect receive origin file when transform file is null', done => {
       const handlers = {};
       const props = {