rc-upload - npm Package Compare versions

Comparing version 2.4.4 to 2.5.0

es/AjaxUploader.js

@@ -15,2 +15,3 @@ import _extends from 'babel-runtime/helpers/extends';
 import attrAccept from './attr-accept';
+import traverseFileTree from './traverseFileTree';
 
@@ -46,12 +47,24 @@ var AjaxUploader = function (_Component) {
     }, _this.onFileDrop = function (e) {
+      e.preventDefault();
+
       if (e.type === 'dragover') {
-        e.preventDefault();
         return;
       }
-      var files = Array.prototype.slice.call(e.dataTransfer.files).filter(function (file) {
-        return attrAccept(file, _this.props.accept);
+
+      if (_this.props.directory) {
+        traverseFileTree(e.dataTransfer.items, _this.uploadFiles, function (_file) {
+          return attrAccept(_file, _this.props.accept);
+        });
+      } else {
+        var files = Array.prototype.slice.call(e.dataTransfer.files).filter(function (file) {
+          return attrAccept(file, _this.props.accept);
+        });
+        _this.uploadFiles(files);
+      }
+    }, _this.uploadFiles = function (files) {
+      var postFiles = Array.prototype.slice.call(files);
+      postFiles.forEach(function (file) {
+        file.uid = getUid();
+        _this.upload(file, postFiles);
       });
-      _this.uploadFiles(files);
-
-      e.preventDefault();
     }, _this.saveFileInput = function (node) {
@@ -74,16 +87,5 @@ _this.fileInput = node;
   }, {
-    key: 'uploadFiles',
-    value: function uploadFiles(files) {
-      var _this2 = this;
-
-      var postFiles = Array.prototype.slice.call(files);
-      postFiles.forEach(function (file) {
-        file.uid = getUid();
-        _this2.upload(file, postFiles);
-      });
-    }
-  }, {
     key: 'upload',
     value: function upload(file, fileList) {
-      var _this3 = this;
+      var _this2 = this;
 
@@ -95,3 +97,3 @@ var props = this.props;
         return setTimeout(function () {
-          return _this3.post(file);
+          return _this2.post(file);
         }, 0);
@@ -105,6 +107,5 @@ }
           if (processedFileType === '[object File]' || processedFileType === '[object Blob]') {
-            _this3.post(processedFile);
-          } else {
-            _this3.post(file);
+            return _this2.post(processedFile);
           }
+          return _this2.post(file);
         })['catch'](function (e) {
@@ -115,3 +116,3 @@ console && console.log(e); // eslint-disable-line
         setTimeout(function () {
-          return _this3.post(file);
+          return _this2.post(file);
         }, 0);
@@ -123,3 +124,3 @@ }
     value: function post(file) {
-      var _this4 = this;
+      var _this3 = this;
 
@@ -137,25 +138,34 @@ if (!this._isMounted) {
       }
-      var uid = file.uid;
+      new Promise(function (resolve) {
+        var action = props.action;
 
-      var request = props.customRequest || defaultRequest;
-      this.reqs[uid] = request({
-        action: props.action,
-        filename: props.name,
-        file: file,
-        data: data,
-        headers: props.headers,
-        withCredentials: props.withCredentials,
-        onProgress: onProgress ? function (e) {
-          onProgress(e, file);
-        } : null,
-        onSuccess: function onSuccess(ret, xhr) {
-          delete _this4.reqs[uid];
-          props.onSuccess(ret, file, xhr);
-        },
-        onError: function onError(err, ret) {
-          delete _this4.reqs[uid];
-          props.onError(err, ret, file);
+        if (typeof action === 'function') {
+          return resolve(action(file));
         }
+        resolve(action);
+      }).then(function (action) {
+        var uid = file.uid;
+
+        var request = props.customRequest || defaultRequest;
+        _this3.reqs[uid] = request({
+          action: action,
+          filename: props.name,
+          file: file,
+          data: data,
+          headers: props.headers,
+          withCredentials: props.withCredentials,
+          onProgress: onProgress ? function (e) {
+            onProgress(e, file);
+          } : null,
+          onSuccess: function onSuccess(ret, xhr) {
+            delete _this3.reqs[uid];
+            props.onSuccess(ret, file, xhr);
+          },
+          onError: function onError(err, ret) {
+            delete _this3.reqs[uid];
+            props.onError(err, ret, file);
+          }
+        });
+        onStart(file);
       });
-      onStart(file);
     }
@@ -206,3 +216,4 @@ }, {
           accept = _props.accept,
-          children = _props.children;
+          children = _props.children,
+          directory = _props.directory;
 
@@ -230,2 +241,4 @@ var cls = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, prefixCls + '-disabled', disabled), _defineProperty(_classNames, className, className), _classNames));
           accept: accept,
+          directory: directory ? 'directory' : null,
+          webkitdirectory: directory ? 'webkitdirectory' : null,
           multiple: multiple,
@@ -248,2 +261,3 @@ onChange: this.onChange
   multiple: PropTypes.bool,
+  directory: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -254,2 +268,3 @@ accept: PropTypes.string,
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  action: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   headers: PropTypes.object,
@@ -256,0 +271,0 @@ beforeUpload: PropTypes.func,

es/IframeUploader.js

@@ -146,3 +146,3 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty';
       }
-      return '\n    <!DOCTYPE html>\n    <html>\n    <head>\n    <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n    <style>\n    body,html {padding:0;margin:0;border:0;overflow:hidden;}\n    </style>\n    ' + domainScript + '\n    </head>\n    <body>\n    <form method="post"\n    encType="multipart/form-data"\n    action="' + this.props.action + '" id="form"\n    style="display:block;height:9999px;position:relative;overflow:hidden;">\n    <input id="input" type="file"\n     name="' + this.props.name + '"\n     style="position:absolute;top:0;right:0;height:9999px;font-size:9999px;cursor:pointer;"/>\n    ' + domainInput + '\n    <span id="data"></span>\n    </form>\n    </body>\n    </html>\n    ';
+      return '\n    <!DOCTYPE html>\n    <html>\n    <head>\n    <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n    <style>\n    body,html {padding:0;margin:0;border:0;overflow:hidden;}\n    </style>\n    ' + domainScript + '\n    </head>\n    <body>\n    <form method="post"\n    encType="multipart/form-data"\n    action="" id="form"\n    style="display:block;height:9999px;position:relative;overflow:hidden;">\n    <input id="input" type="file"\n     name="' + this.props.name + '"\n     style="position:absolute;top:0;right:0;height:9999px;font-size:9999px;cursor:pointer;"/>\n    ' + domainInput + '\n    <span id="data"></span>\n    </form>\n    </body>\n    </html>\n    ';
     }
@@ -226,2 +226,4 @@ }, {
     value: function post(file) {
+      var _this4 = this;
+
       var formNode = this.getFormNode();
@@ -245,5 +247,15 @@ var dataSpan = this.getFormDataNode();
       dataSpan.appendChild(inputs);
-      formNode.submit();
-      dataSpan.innerHTML = '';
-      onStart(file);
+      new Promise(function (resolve) {
+        var action = _this4.props.action;
+
+        if (typeof action === 'function') {
+          return resolve(action(file));
+        }
+        resolve(action);
+      }).then(function (action) {
+        formNode.setAttribute('action', action);
+        formNode.submit();
+        dataSpan.innerHTML = '';
+        onStart(file);
+      });
     }
@@ -297,3 +309,3 @@ }, {
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  action: PropTypes.string,
+  action: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   name: PropTypes.string
@@ -300,0 +312,0 @@ };

es/Upload.js

@@ -65,3 +65,3 @@ import _extends from 'babel-runtime/helpers/extends';
       var ComponentUploader = this.getComponent();
-      return React.createElement(ComponentUploader, _extends({}, this.props, { ref: this.saveUploader }));
+      return React.createElement(ComponentUploader, _extends({}, this.props, { directory: this.props.directory, ref: 'inner' }));
     }
@@ -77,5 +77,6 @@ }]);
   prefixCls: PropTypes.string,
-  action: PropTypes.string,
+  action: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   name: PropTypes.string,
   multipart: PropTypes.bool,
+  directory: PropTypes.bool,
   onError: PropTypes.func,
@@ -82,0 +83,0 @@ onSuccess: PropTypes.func,

HISTORY.md

 # History
 ----
 
+### 2.5.0 / 2018-06-12
+
+- Support upload directory. [#114](https://github.com/react-component/upload/pull/114)
+- Support `action={(file) => Promise}`. [#97](https://github.com/react-component/upload/pull/97)
+- Fix a bluebird promise warning. [#110](https://github.com/react-component/upload/pull/110)
+
 ### 2.4.0 / 2017-07-15
@@ -5,0 +11,0 @@

lib/AjaxUploader.js

@@ -55,6 +55,8 @@ 'use strict';
 
+var _traverseFileTree = require('./traverseFileTree');
+
+var _traverseFileTree2 = _interopRequireDefault(_traverseFileTree);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-/* eslint react/no-is-mounted:0 react/sort-comp:0 */
-
 var AjaxUploader = function (_Component) {
@@ -89,12 +91,24 @@ (0, _inherits3['default'])(AjaxUploader, _Component);
     }, _this.onFileDrop = function (e) {
+      e.preventDefault();
+
       if (e.type === 'dragover') {
-        e.preventDefault();
         return;
       }
-      var files = Array.prototype.slice.call(e.dataTransfer.files).filter(function (file) {
-        return (0, _attrAccept2['default'])(file, _this.props.accept);
+
+      if (_this.props.directory) {
+        (0, _traverseFileTree2['default'])(e.dataTransfer.items, _this.uploadFiles, function (_file) {
+          return (0, _attrAccept2['default'])(_file, _this.props.accept);
+        });
+      } else {
+        var files = Array.prototype.slice.call(e.dataTransfer.files).filter(function (file) {
+          return (0, _attrAccept2['default'])(file, _this.props.accept);
+        });
+        _this.uploadFiles(files);
+      }
+    }, _this.uploadFiles = function (files) {
+      var postFiles = Array.prototype.slice.call(files);
+      postFiles.forEach(function (file) {
+        file.uid = (0, _uid2['default'])();
+        _this.upload(file, postFiles);
       });
-      _this.uploadFiles(files);
-
-      e.preventDefault();
     }, _this.saveFileInput = function (node) {
@@ -117,16 +131,5 @@ _this.fileInput = node;
   }, {
-    key: 'uploadFiles',
-    value: function uploadFiles(files) {
-      var _this2 = this;
-
-      var postFiles = Array.prototype.slice.call(files);
-      postFiles.forEach(function (file) {
-        file.uid = (0, _uid2['default'])();
-        _this2.upload(file, postFiles);
-      });
-    }
-  }, {
     key: 'upload',
     value: function upload(file, fileList) {
-      var _this3 = this;
+      var _this2 = this;
 
@@ -138,3 +141,3 @@ var props = this.props;
         return setTimeout(function () {
-          return _this3.post(file);
+          return _this2.post(file);
         }, 0);
@@ -148,6 +151,5 @@ }
           if (processedFileType === '[object File]' || processedFileType === '[object Blob]') {
-            _this3.post(processedFile);
-          } else {
-            _this3.post(file);
+            return _this2.post(processedFile);
           }
+          return _this2.post(file);
         })['catch'](function (e) {
@@ -158,3 +160,3 @@ console && console.log(e); // eslint-disable-line
         setTimeout(function () {
-          return _this3.post(file);
+          return _this2.post(file);
         }, 0);
@@ -166,3 +168,3 @@ }
     value: function post(file) {
-      var _this4 = this;
+      var _this3 = this;
 
@@ -180,25 +182,34 @@ if (!this._isMounted) {
       }
-      var uid = file.uid;
+      new Promise(function (resolve) {
+        var action = props.action;
 
-      var request = props.customRequest || _request2['default'];
-      this.reqs[uid] = request({
-        action: props.action,
-        filename: props.name,
-        file: file,
-        data: data,
-        headers: props.headers,
-        withCredentials: props.withCredentials,
-        onProgress: onProgress ? function (e) {
-          onProgress(e, file);
-        } : null,
-        onSuccess: function onSuccess(ret, xhr) {
-          delete _this4.reqs[uid];
-          props.onSuccess(ret, file, xhr);
-        },
-        onError: function onError(err, ret) {
-          delete _this4.reqs[uid];
-          props.onError(err, ret, file);
+        if (typeof action === 'function') {
+          return resolve(action(file));
         }
+        resolve(action);
+      }).then(function (action) {
+        var uid = file.uid;
+
+        var request = props.customRequest || _request2['default'];
+        _this3.reqs[uid] = request({
+          action: action,
+          filename: props.name,
+          file: file,
+          data: data,
+          headers: props.headers,
+          withCredentials: props.withCredentials,
+          onProgress: onProgress ? function (e) {
+            onProgress(e, file);
+          } : null,
+          onSuccess: function onSuccess(ret, xhr) {
+            delete _this3.reqs[uid];
+            props.onSuccess(ret, file, xhr);
+          },
+          onError: function onError(err, ret) {
+            delete _this3.reqs[uid];
+            props.onError(err, ret, file);
+          }
+        });
+        onStart(file);
       });
-      onStart(file);
     }
@@ -249,3 +260,4 @@ }, {
           accept = _props.accept,
-          children = _props.children;
+          children = _props.children,
+          directory = _props.directory;
 
@@ -273,2 +285,4 @@ var cls = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls, true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), (0, _defineProperty3['default'])(_classNames, className, className), _classNames));
           accept: accept,
+          directory: directory ? 'directory' : null,
+          webkitdirectory: directory ? 'webkitdirectory' : null,
           multiple: multiple,
@@ -282,3 +296,3 @@ onChange: this.onChange
   return AjaxUploader;
-}(_react.Component);
+}(_react.Component); /* eslint react/no-is-mounted:0 react/sort-comp:0 */
 
@@ -291,2 +305,3 @@ AjaxUploader.propTypes = {
   multiple: _propTypes2['default'].bool,
+  directory: _propTypes2['default'].bool,
   disabled: _propTypes2['default'].bool,
@@ -297,2 +312,3 @@ accept: _propTypes2['default'].string,
   data: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].func]),
+  action: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func]),
   headers: _propTypes2['default'].object,
@@ -299,0 +315,0 @@ beforeUpload: _propTypes2['default'].func,

lib/IframeUploader.js

@@ -189,3 +189,3 @@ 'use strict';
       }
-      return '\n    <!DOCTYPE html>\n    <html>\n    <head>\n    <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n    <style>\n    body,html {padding:0;margin:0;border:0;overflow:hidden;}\n    </style>\n    ' + domainScript + '\n    </head>\n    <body>\n    <form method="post"\n    encType="multipart/form-data"\n    action="' + this.props.action + '" id="form"\n    style="display:block;height:9999px;position:relative;overflow:hidden;">\n    <input id="input" type="file"\n     name="' + this.props.name + '"\n     style="position:absolute;top:0;right:0;height:9999px;font-size:9999px;cursor:pointer;"/>\n    ' + domainInput + '\n    <span id="data"></span>\n    </form>\n    </body>\n    </html>\n    ';
+      return '\n    <!DOCTYPE html>\n    <html>\n    <head>\n    <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n    <style>\n    body,html {padding:0;margin:0;border:0;overflow:hidden;}\n    </style>\n    ' + domainScript + '\n    </head>\n    <body>\n    <form method="post"\n    encType="multipart/form-data"\n    action="" id="form"\n    style="display:block;height:9999px;position:relative;overflow:hidden;">\n    <input id="input" type="file"\n     name="' + this.props.name + '"\n     style="position:absolute;top:0;right:0;height:9999px;font-size:9999px;cursor:pointer;"/>\n    ' + domainInput + '\n    <span id="data"></span>\n    </form>\n    </body>\n    </html>\n    ';
     }
@@ -269,2 +269,4 @@ }, {
     value: function post(file) {
+      var _this4 = this;
+
       var formNode = this.getFormNode();
@@ -288,5 +290,15 @@ var dataSpan = this.getFormDataNode();
       dataSpan.appendChild(inputs);
-      formNode.submit();
-      dataSpan.innerHTML = '';
-      onStart(file);
+      new Promise(function (resolve) {
+        var action = _this4.props.action;
+
+        if (typeof action === 'function') {
+          return resolve(action(file));
+        }
+        resolve(action);
+      }).then(function (action) {
+        formNode.setAttribute('action', action);
+        formNode.submit();
+        dataSpan.innerHTML = '';
+        onStart(file);
+      });
     }
@@ -339,3 +351,3 @@ }, {
   data: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].func]),
-  action: _propTypes2['default'].string,
+  action: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func]),
   name: _propTypes2['default'].string
@@ -342,0 +354,0 @@ };

lib/Upload.js

@@ -99,3 +99,3 @@ 'use strict';
       var ComponentUploader = this.getComponent();
-      return _react2['default'].createElement(ComponentUploader, (0, _extends3['default'])({}, this.props, { ref: this.saveUploader }));
+      return _react2['default'].createElement(ComponentUploader, (0, _extends3['default'])({}, this.props, { directory: this.props.directory, ref: 'inner' }));
     }
@@ -110,5 +110,6 @@ }]);
   prefixCls: _propTypes2['default'].string,
-  action: _propTypes2['default'].string,
+  action: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func]),
   name: _propTypes2['default'].string,
   multipart: _propTypes2['default'].bool,
+  directory: _propTypes2['default'].bool,
   onError: _propTypes2['default'].func,
@@ -115,0 +116,0 @@ onSuccess: _propTypes2['default'].func,

package.json

 {
   "name": "rc-upload",
-  "version": "2.4.4",
+  "version": "2.5.0",
   "description": "upload ui component for react",
@@ -36,6 +36,7 @@ "keywords": [
     "lint": "rc-tools run lint",
-    "test": "jest",
+    "test": "jest  --setupTestFrameworkScriptFile=raf/polyfill",
     "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls"
   },
   "devDependencies": {
+    "axios": "^0.18.0",
     "co-busboy": "^1.3.0",
@@ -46,2 +47,3 @@ "coveralls": "^2.13.1",
     "pre-commit": "1.x",
+    "raf": "^3.4.0",
     "rc-tools": "6.x",
@@ -58,4 +60,4 @@ "react": "^16.0.0",
     "classnames": "^2.2.5",
-    "warning": "2.x",
-    "prop-types": "^15.5.7"
+    "prop-types": "^15.5.7",
+    "warning": "2.x"
   },
@@ -62,0 +64,0 @@ "jest": {

README.md

@@ -63,3 +63,3 @@ # rc-upload
 |onReady | function | | only call when supportServerRender is true, upload is rendered completely |
-|action| string | | form action url |
+|action| string | function(file): string | Promise<string> | | form action url |
 |data| object/function(file) | | other data object to post or a function which returns a data object |
@@ -93,3 +93,3 @@ |headers| object | {} | http headers to post, available in modern browsers |
 
-Allows for advanced customization by overriding default behavior in AjaxUplaoder. Provide your own XMLHttpRequest calls to interface with custom backend processes or interact with AWS S3 service through the aws-sdk-js package.
+Allows for advanced customization by overriding default behavior in AjaxUploader. Provide your own XMLHttpRequest calls to interface with custom backend processes or interact with AWS S3 service through the aws-sdk-js package.
 
@@ -118,3 +118,4 @@ customRequest callback is passed an object with:
 
-In iframe uploader way, the content-type of response should be `text/plain` or `text/html`.[referense](https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation)
+In iframe uploader way, the content-type of response should be `text/plain` or `text/html`. [See more about 
+Content-Type Negotiation](https://github.com/blueimp/jQuery-File-Upload/wiki/Setup#content-type-negotiation)
 
@@ -121,0 +122,0 @@ What's more, in iframe mode, the response's status should always be `200 OK`, otherwise you might get an `Access is denied` error in IE 8/9.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67606

increased by11.67%

Number of package files

19

increased by11.76%

Lines of code

1683

increased by11.6%

Number of lines in readme file

136

increased by0.74%

Worsened metrics

Dev dependency count

11

increased by22.22%

No dependency changes