rc-upload - npm Package Compare versions

Comparing version 1.14.0 to 2.0.0

HISTORY.md

 # History
 ----
 
+### 2.0.0 / 2016-08-10
+
+- add abort api
+- props.onStart's argument is always a single File
+- add disabled prop
+
+### 1.14.1 / 2016-07-19
+
+- fix ajax multiple load
+
 ### 1.14.0 / 2016-07-19
@@ -5,0 +15,0 @@

lib/AjaxUploader.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -30,2 +32,5 @@
     multiple: _react.PropTypes.bool,
+    disabled: _react.PropTypes.bool,
+    accept: _react.PropTypes.string,
+    children: _react.PropTypes.any,
     onStart: _react.PropTypes.func,
@@ -39,4 +44,4 @@ data: _react.PropTypes.oneOfType([_react.PropTypes.object, _react.PropTypes.func]),
   getInitialState: function getInitialState() {
+    this.reqs = {};
     return {
-      disabled: false,
       uid: (0, _uid2['default'])()
@@ -47,10 +52,5 @@ };
   onChange: function onChange(e) {
-    if (this.state.disabled) {
-      return;
-    }
-    this.setState({
-      disabled: true
-    });
     var files = e.target.files;
     this.uploadFiles(files);
+    this.reset();
   },
@@ -78,6 +78,2 @@
 
-    if (this.state.disabled) {
-      return;
-    }
-
     var files = e.dataTransfer.files;
@@ -91,17 +87,7 @@ this.uploadFiles(files);
     var postFiles = Array.prototype.slice.call(files);
-    if (!this.props.multiple) {
-      postFiles = postFiles.slice(0, 1);
-    }
     var len = postFiles.length;
-    if (len > 0) {
-      for (var i = 0; i < len; i++) {
-        var file = postFiles[i];
-        file.uid = (0, _uid2['default'])();
-        this.upload(file);
-      }
-      if (this.props.multiple) {
-        this.props.onStart(postFiles);
-      } else {
-        this.props.onStart(postFiles[0]);
-      }
+    for (var i = 0; i < len; i++) {
+      var file = postFiles[i];
+      file.uid = (0, _uid2['default'])();
+      this.upload(file);
     }
@@ -114,2 +100,3 @@ },
     var props = this.props;
+
     if (!props.beforeUpload) {
@@ -127,10 +114,5 @@ return this.post(file);
         }
-      }, function () {
-        _this._reset();
       });
     } else if (before !== false) {
       this.post(file);
-    } else {
-      // fix https://github.com/ant-design/ant-design/issues/1989
-      this._reset();
     }
@@ -144,7 +126,10 @@ },
     var data = props.data;
+    var onStart = props.onStart;
+
     if (typeof data === 'function') {
       data = data(file);
     }
+    var uid = file.uid;
 
-    (0, _request2['default'])({
+    this.reqs[uid] = (0, _request2['default'])({
       action: props.action,
@@ -160,15 +145,15 @@ filename: props.name,
       onSuccess: function onSuccess(ret) {
+        delete _this2.reqs[uid];
         props.onSuccess(ret, file);
-        _this2._reset();
       },
       onError: function onError(err, ret) {
+        delete _this2.reqs[uid];
         props.onError(err, ret, file);
-        _this2._reset();
       }
     });
+    onStart(file);
   },
 
-  _reset: function _reset() {
+  reset: function reset() {
     this.setState({
-      disabled: false,
       uid: (0, _uid2['default'])()
@@ -178,17 +163,48 @@ });
 
+  abort: function abort(file) {
+    var reqs = this.reqs;
+
+    if (file) {
+      var uid = file;
+      if (file && file.uid) {
+        uid = file.uid;
+      }
+      if (reqs[uid]) {
+        reqs[uid].abort();
+        delete reqs[uid];
+      }
+    } else {
+      Object.keys(reqs).forEach(function (uid) {
+        reqs[uid].abort();
+        delete reqs[uid];
+      });
+    }
+  },
+
   render: function render() {
-    var props = this.props;
-    var Tag = this.props.component;
+    var _props = this.props;
+    var Tag = _props.component;
+    var prefixCls = _props.prefixCls;
+    var disabled = _props.disabled;
+    var style = _props.style;
+    var multiple = _props.multiple;
+    var accept = _props.accept;
+    var children = _props.children;
+
+    var events = disabled ? {
+      className: prefixCls + ' ' + prefixCls + '-disabled'
+    } : {
+      className: '' + prefixCls,
+      onClick: this.onClick,
+      onKeyDown: this.onKeyDown,
+      onDrop: this.onFileDrop,
+      onDragOver: this.onFileDrop,
+      tabIndex: '0'
+    };
     return _react2['default'].createElement(
       Tag,
-      {
-        onClick: this.onClick,
-        onKeyDown: this.onKeyDown,
-        onDrop: this.onFileDrop,
-        onDragOver: this.onFileDrop,
+      _extends({}, events, {
         role: 'button',
-        tabIndex: '0',
-        style: this.props.style,
-        className: this.state.disabled ? this.props.prefixCls + ' ' + props.prefixCls + '-disabled' : '' + this.props.prefixCls
-      },
+        style: style
+      }),
       _react2['default'].createElement('input', {
@@ -198,9 +214,8 @@ type: 'file',
         key: this.state.uid,
-        disabled: this.state.disabled,
         style: { display: 'none' },
-        accept: props.accept,
-        multiple: this.props.multiple,
+        accept: accept,
+        multiple: multiple,
         onChange: this.onChange
       }),
-      props.children
+      children
     );
@@ -207,0 +222,0 @@ }

lib/IframeUploader.js

@@ -27,3 +27,3 @@ 'use strict';
 
-var iframeStyle = {
+var IFRAME_STYLE = {
   position: 'absolute',
@@ -37,2 +37,3 @@ top: 0,
 
+// diferent from AjaxUpload, can only upload on at one time, serial seriously
 var IframeUploader = _react2['default'].createClass({
@@ -44,3 +45,5 @@ displayName: 'IframeUploader',
     style: _react.PropTypes.object,
+    disabled: _react.PropTypes.bool,
     prefixCls: _react.PropTypes.string,
+    accept: _react.PropTypes.string,
     onStart: _react.PropTypes.func,
@@ -55,3 +58,6 @@ multiple: _react.PropTypes.bool,
   getInitialState: function getInitialState() {
-    return { disabled: false };
+    this.file = {};
+    return {
+      uploading: false
+    };
   },
@@ -69,8 +75,9 @@
   onLoad: function onLoad() {
-    if (!this.state.disabled) {
+    if (!this.state.uploading) {
       return;
     }
     var props = this.props;
+    var file = this.file;
+
     var response = undefined;
-    var eventFile = this.file;
     try {
@@ -83,13 +90,14 @@ var doc = this.getIframeDocument();
       response = doc.body.innerHTML;
-      props.onSuccess(response, eventFile);
+      props.onSuccess(response, file);
     } catch (err) {
       (0, _warning2['default'])(false, 'cross domain error for Upload. Maybe server should return document.domain script. see Note from https://github.com/react-component/upload');
       response = 'cross-domain';
-      props.onError(err, null, eventFile);
+      props.onError(err, null, file);
     }
-    this.enableIframe();
-    this.initIframe();
+    this.endUpload();
   },
 
   onChange: function onChange() {
+    var _this = this;
+
     var target = this.getFormInputNode();
@@ -102,19 +110,20 @@ // ie8/9 don't support FileList Object
     };
-    this.props.onStart(this.getFileForMultiple(file));
-    var formNode = this.getFormNode();
-    var dataSpan = this.getFormDataNode();
-    var data = this.props.data;
-    if (typeof data === 'function') {
-      data = data(file);
+    this.startUpload();
+    var props = this.props;
+
+    if (!props.beforeUpload) {
+      return this.post(file);
     }
-    var inputs = [];
-    for (var key in data) {
-      if (data.hasOwnProperty(key)) {
-        inputs.push('<input name="' + key + '" value="' + data[key] + '"/>');
-      }
+    var before = props.beforeUpload(file);
+    if (before && before.then) {
+      before.then(function () {
+        _this.post(file);
+      }, function () {
+        _this.endUpload();
+      });
+    } else if (before !== false) {
+      this.post(file);
+    } else {
+      this.endUpload();
     }
-    dataSpan.innerHTML = inputs.join('');
-    this.disabledIframe();
-    formNode.submit();
-    dataSpan.innerHTML = '';
   },
@@ -182,17 +191,19 @@
 
-  enableIframe: function enableIframe() {
-    if (this.state.disabled) {
+  endUpload: function endUpload() {
+    if (this.state.uploading) {
+      this.file = {};
       // hack avoid batch
-      this.state.disabled = false;
+      this.state.uploading = false;
       this.setState({
-        disabled: false
+        uploading: false
       });
+      this.initIframe();
     }
   },
 
-  disabledIframe: function disabledIframe() {
-    if (!this.state.disabled) {
-      this.state.disabled = true;
+  startUpload: function startUpload() {
+    if (!this.state.uploading) {
+      this.state.uploading = true;
       this.setState({
-        disabled: true
+        uploading: true
       });
@@ -209,12 +220,54 @@ }
 
+  abort: function abort(file) {
+    if (file) {
+      var uid = file;
+      if (file && file.uid) {
+        uid = file.uid;
+      }
+      if (uid === this.file.uid) {
+        this.endUpload();
+      }
+    } else {
+      this.endUpload();
+    }
+  },
+
+  post: function post(file) {
+    var formNode = this.getFormNode();
+    var dataSpan = this.getFormDataNode();
+    var data = this.props.data;
+    var onStart = this.props.onStart;
+
+    if (typeof data === 'function') {
+      data = data(file);
+    }
+    var inputs = [];
+    for (var key in data) {
+      if (data.hasOwnProperty(key)) {
+        inputs.push('<input name="' + key + '" value="' + data[key] + '"/>');
+      }
+    }
+    dataSpan.innerHTML = inputs.join('');
+    formNode.submit();
+    dataSpan.innerHTML = '';
+    onStart(file);
+  },
+
   render: function render() {
-    var style = _extends({}, iframeStyle, {
-      display: this.state.disabled ? 'none' : ''
+    var _props = this.props;
+    var Tag = _props.component;
+    var disabled = _props.disabled;
+    var prefixCls = _props.prefixCls;
+    var children = _props.children;
+    var style = _props.style;
+
+    var iframeStyle = _extends({}, IFRAME_STYLE, {
+      display: this.state.uploading || disabled ? 'none' : ''
     });
-    var Tag = this.props.component;
+
     return _react2['default'].createElement(
       Tag,
       {
-        className: this.state.disabled ? this.props.prefixCls + ' ' + this.props.prefixCls + '-disabled' : '' + this.props.prefixCls,
-        style: _extends({ position: 'relative', zIndex: 0 }, this.props.style)
+        className: disabled ? prefixCls + ' ' + prefixCls + '-disabled' : '' + prefixCls,
+        style: _extends({ position: 'relative', zIndex: 0 }, style)
       },
@@ -224,5 +277,5 @@ _react2['default'].createElement('iframe', {
         onLoad: this.onLoad,
-        style: style
+        style: iframeStyle
       }),
-      this.props.children
+      children
     );
@@ -229,0 +282,0 @@ }

lib/request.js

@@ -42,6 +42,2 @@ 'use strict';
 function upload(option) {
-  if (typeof XMLHttpRequest === 'undefined') {
-    return;
-  }
-
   var xhr = new XMLHttpRequest();
@@ -102,4 +98,10 @@ if (xhr.upload) {
   xhr.send(formData);
+
+  return {
+    abort: function abort() {
+      xhr.abort();
+    }
+  };
 }
 
 module.exports = exports['default'];

lib/Upload.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -42,2 +44,3 @@
     multiple: _react.PropTypes.bool,
+    disabled: _react.PropTypes.bool,
     beforeUpload: _react.PropTypes.func,
@@ -87,2 +90,6 @@ onReady: _react.PropTypes.func,
 
+  abort: function abort(file) {
+    this.refs.inner.abort(file);
+  },
+
   render: function render() {
@@ -93,3 +100,3 @@ if (this.props.supportServerRender) {
       if (_Component) {
-        return _react2['default'].createElement(_Component, this.props);
+        return _react2['default'].createElement(_Component, _extends({}, this.props, { ref: 'inner' }));
       }
@@ -99,3 +106,3 @@ return null;
     var Component = this.getComponent();
-    return _react2['default'].createElement(Component, this.props);
+    return _react2['default'].createElement(Component, _extends({}, this.props, { ref: 'inner' }));
   }
@@ -102,0 +109,0 @@ });

package.json

 {
   "name": "rc-upload",
-  "version": "1.14.0",
+  "version": "2.0.0",
   "description": "upload ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -54,6 +54,7 @@ # rc-upload
 
-|name|type|默认值| 说明|
+|name|type|default| description|
 |-----|---|--------|----|
 |name | string | file| file param post to server |
 |style | object | {}| root component inline style |
+|disabled | boolean | false | whether disabled |
 |component | "div"|"span" | "span"| wrap component name |
@@ -78,3 +79,3 @@ |supportServerRender | boolean | false| whether to support server render |
 2. `responce`: request responce, not support on iframeUpload
-3. `file`: upload file object
+3. `file`: upload file
 
@@ -87,2 +88,7 @@ ### onSuccess arguments
 
+### methods
+
+abort(file?: File) => void: abort the uploading file
+
+
 ### IE8/9 Note
@@ -89,0 +95,0 @@

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

25667

increased by9.29%

Lines of code

601

increased by11.5%

Number of lines in readme file

112

increased by5.66%

No dependency changes