rc-upload - npm Package Compare versions

Comparing version 1.5.6 to 1.6.0

lib/AjaxUploader.js

 'use strict';
 
-var React = require('react');
-var request = require('superagent');
-var uid = require('./uid');
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
 
-var AjaxUploader = React.createClass({
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _superagent = require('superagent');
+
+var _superagent2 = _interopRequireDefault(_superagent);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _uid = require('./uid');
+
+var _uid2 = _interopRequireDefault(_uid);
+
+var AjaxUploader = _react2['default'].createClass({
   displayName: 'AjaxUploader',
 
   propTypes: {
-    multiple: React.PropTypes.bool,
-    onStart: React.PropTypes.func,
-    data: React.PropTypes.object
+    multiple: _react.PropTypes.bool,
+    onStart: _react.PropTypes.func,
+    data: _react.PropTypes.object
   },
@@ -22,3 +36,3 @@
   onClick: function onClick() {
-    var el = React.findDOMNode(this.refs.file);
+    var el = _react2['default'].findDOMNode(this.refs.file);
     if (!el) {
@@ -51,7 +65,7 @@ return;
     var props = this.props;
-    return React.createElement(
+    return _react2['default'].createElement(
       'span',
       { onClick: this.onClick, onKeyDown: this.onKeyDown, onDrop: this.onFileDrop, onDragOver: this.onFileDrop,
         role: 'button', tabIndex: '0' },
-      React.createElement('input', { type: 'file',
+      _react2['default'].createElement('input', { type: 'file',
         ref: 'file',
@@ -71,3 +85,3 @@ style: hidden,
         var file = files.item(i);
-        file.uid = uid();
+        file.uid = (0, _uid2['default'])();
         this.post(file);
@@ -85,3 +99,3 @@ }
     var props = this.props;
-    var req = request.post(props.action).attach(props.name, file, file.name);
+    var req = _superagent2['default'].post(props.action).attach(props.name, file, file.name);
     var data = props.data;
@@ -116,2 +130,3 @@ if (typeof data === 'function') {
 
-module.exports = AjaxUploader;
+exports['default'] = AjaxUploader;
+module.exports = exports['default'];

lib/IframeUploader.js

 'use strict';
 
-var React = require('react');
-var uid = require('./uid');
-var Align = require('rc-align');
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
 
-var IframeUploader = React.createClass({
-  displayName: 'IframeUploader',
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-  propTypes: {
-    onStart: React.PropTypes.func,
-    getFormContainer: React.PropTypes.func,
-    children: React.PropTypes.any,
-    formZIndex: React.PropTypes.number,
-    data: React.PropTypes.object
-  },
+var _react = require('react');
 
-  getInitialState: function getInitialState() {
-    return {
-      uid: 1,
-      loading: false
-    };
-  },
+var _react2 = _interopRequireDefault(_react);
 
-  getFormContainer: function getFormContainer() {
-    var props = this.props;
-    if (props.getFormContainer) {
-      return props.getFormContainer();
-    }
-    if (this.formContainer) {
-      return this.formContainer;
-    }
-    this.formContainer = document.createElement('div');
-    document.body.appendChild(this.formContainer);
-    return this.formContainer;
-  },
+var _uid = require('./uid');
 
-  getFormElement: function getFormElement() {
-    var props = this.props;
-    var trigger = React.findDOMNode(this);
-    var width = trigger.offsetWidth;
-    var height = trigger.offsetHeight;
-    var iframeName = this.getIframeName();
-    var iframe = this.getIframe();
-    var cursor = this.state.loading ? 'default' : 'pointer';
-    var formStyle = {
-      position: 'absolute',
-      overflow: 'hidden',
-      width: width,
-      height: height,
-      cursor: cursor,
-      opacity: 0,
-      filter: 'alpha(opacity=0)',
-      zIndex: props.formZIndex
-    };
-    var inputStyle = {
-      position: 'absolute',
-      top: 0,
-      right: 0,
-      opacity: 0,
-      filter: 'alpha(opacity=0)',
-      outline: 0,
-      cursor: cursor,
-      height: height,
-      fontSize: Math.max(64, height * 5)
-    };
-    return React.createElement(
-      Align,
-      { monitorWindowResize: true, align: {
-          points: ['tl', 'tl']
-        }, target: this.getDOMNode },
-      React.createElement(
-        'form',
-        { action: props.action,
-          target: iframeName,
-          encType: 'multipart/form-data',
-          method: 'post', style: formStyle },
-        React.createElement('input', { type: 'file',
-          name: props.name,
-          disabled: this.state.loading,
-          hideFocus: 'true',
-          style: inputStyle,
-          accept: props.accept,
-          onChange: this.onChange
-        }),
-        React.createElement('span', null),
-        iframe
-      )
-    );
-  },
+var _uid2 = _interopRequireDefault(_uid);
 
-  updateForm: function updateForm() {
-    var component = this;
-    React.render(this.getFormElement(), this.getFormContainer(), function save() {
-      component.formInstance = this;
-    });
+var iframeStyle = {
+  position: 'absolute',
+  top: 0,
+  opacity: 0,
+  filter: 'alpha(opacity=0)',
+  left: 0,
+  zIndex: 9999
+};
+
+var IframeUploader = _react2['default'].createClass({
+  displayName: 'IframeUploader',
+
+  propTypes: {
+    onStart: _react.PropTypes.func,
+    multiple: _react.PropTypes.bool,
+    children: _react.PropTypes.any,
+    data: _react.PropTypes.object,
+    action: _react.PropTypes.string,
+    name: _react.PropTypes.string
   },
 
   componentDidMount: function componentDidMount() {
-    this.updateForm();
+    this.updateIframeWH();
+    this.initIframe();
   },
 
-  componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
-    if (prevState.uid !== this.state.uid || prevState.loading !== this.state.loading) {
-      this.updateForm();
-    }
+  componentDidUpdate: function componentDidUpdate() {
+    this.updateIframeWH();
   },
 
-  componentWillUnmount: function componentWillUnmount() {
-    if (this.formContainer) {
-      React.unmountComponentAtNode(this.formContainer);
-      document.body.removeChild(this.formContainer);
-      this.formContainer = null;
-    } else if (this.getFormContainer) {
-      React.unmountComponentAtNode(this.getFormContainer());
-    }
-  },
-
-  onLoad: function onLoad(e) {
-    // ie8里面render方法会执行onLoad，应该是bug
-    if (!this.state.loading || !this.file) {
+  onLoad: function onLoad() {
+    if (!this.loading) {
       return;
     }
-
-    var iframe = e.target;
     var props = this.props;
     var response = undefined;
+    var eventFile = this.file;
     try {
-      response = iframe.contentDocument.body.innerHTML;
-      props.onSuccess(response, this.file);
+      response = this.getIframeDocument().body.innerHTML;
+      props.onSuccess(response, eventFile);
     } catch (err) {
       response = 'cross-domain';
-      props.onError(err, null, this.file);
+      props.onError(err, null, eventFile);
     }
-
-    this.file = null;
-
-    React.findDOMNode(this.formInstance).reset();
-
-    this.setState({
-      uid: this.state.uid + 1,
-      loading: false
-    });
+    this.enableIframe();
+    this.initIframe();
   },
 
-  onChange: function onChange(e) {
-    this.setState({
-      loading: true
-    });
-    this.file = e.target.files && e.target.files[0] || e.target;
+  onChange: function onChange() {
+    var target = this.getFormInputNode();
     // ie8/9 don't support FileList Object
     // http://stackoverflow.com/questions/12830058/ie8-input-type-file-get-files
-    try {
-      this.file.name = this.file.name || e.target.value;
-      this.file.uid = uid();
-    } catch (ex) {
-      if (typeof console !== 'undefined') {
-        console.error(ex);
-      }
-    }
-    this.props.onStart(this.file);
-    var formNode = React.findDOMNode(this.formInstance);
-    var dataSpan = formNode.childNodes[1];
+    var file = this.file = {
+      uid: (0, _uid2['default'])(),
+      name: target.value
+    };
+    this.props.onStart(this.getFileForMultiple(file));
+    var formNode = this.getFormNode();
+    var dataSpan = this.getFormDataNode();
     var data = this.props.data;
@@ -177,26 +89,73 @@ if (typeof data === 'function') {
     dataSpan.innerHTML = '';
+    this.disabledIframe();
   },
 
-  getIframe: function getIframe() {
-    var name = this.getIframeName();
-    return React.createElement('iframe', {
-      key: name,
-      onLoad: this.onLoad,
-      style: { display: 'none' },
-      name: name });
+  getIframeNode: function getIframeNode() {
+    return _react2['default'].findDOMNode(this.refs.iframe);
   },
 
-  getIframeName: function getIframeName() {
-    return 'iframe_uploader_' + this.state.uid;
+  getIframeDocument: function getIframeDocument() {
+    return this.getIframeNode().contentDocument;
   },
 
+  getFormNode: function getFormNode() {
+    return this.getIframeDocument().getElementById('form');
+  },
+
+  getFormInputNode: function getFormInputNode() {
+    return this.getIframeDocument().getElementById('input');
+  },
+
+  getFormDataNode: function getFormDataNode() {
+    return this.getIframeDocument().getElementById('data');
+  },
+
+  getFileForMultiple: function getFileForMultiple(file) {
+    return this.props.multiple ? [file] : file;
+  },
+
+  getIframeHTML: function getIframeHTML() {
+    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    </head>\n    <body>\n    <form method="post"\n    encType="multipart/form-data"\n    action="' + this.props.action + '" id="form" 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    <span id="data"></span>\n    </form>\n    </body>\n    </html>\n    ';
+  },
+
   render: function render() {
-    return React.createElement(
-      'div',
-      { onMouseEnter: this.updateForm },
+    return _react2['default'].createElement(
+      'span',
+      { style: { position: 'relative', zIndex: 0 } },
+      _react2['default'].createElement('iframe', { ref: 'iframe',
+        onLoad: this.onLoad,
+        style: iframeStyle }),
       this.props.children
     );
+  },
+
+  initIframe: function initIframe() {
+    var iframeNode = this.getIframeNode();
+    var win = iframeNode.contentWindow;
+    var doc = win.document;
+    doc.open('text/html', 'replace');
+    doc.write(this.getIframeHTML());
+    doc.close();
+    this.getFormInputNode().onchange = this.onChange;
+  },
+
+  enableIframe: function enableIframe() {
+    this.loading = false;
+    this.getIframeNode().style.display = '';
+  },
+
+  disabledIframe: function disabledIframe() {
+    this.loading = true;
+    this.getIframeNode().style.display = 'none';
+  },
+
+  updateIframeWH: function updateIframeWH() {
+    var rootNode = _react2['default'].findDOMNode(this);
+    var iframeNode = this.getIframeNode();
+    iframeNode.style.height = rootNode.offsetHeight + 'px';
+    iframeNode.style.width = rootNode.offsetWidth + 'px';
   }
 });
 
-module.exports = IframeUploader;
+exports['default'] = IframeUploader;
+module.exports = exports['default'];

lib/uid.js

 'use strict';
 
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+exports['default'] = uid;
 var now = +new Date();
 var index = 0;
 
-module.exports = function uid() {
+function uid() {
   return 'rc-upload-' + now + '-' + ++index;
-};
+}
+
+module.exports = exports['default'];

lib/Upload.js

 'use strict';
 
-var React = require('react');
-var PropTypes = React.PropTypes;
-var AjaxUpload = require('./AjaxUploader');
-var IframeUpload = require('./IframeUploader');
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _AjaxUploader = require('./AjaxUploader');
+
+var _AjaxUploader2 = _interopRequireDefault(_AjaxUploader);
+
+var _IframeUploader = require('./IframeUploader');
+
+var _IframeUploader2 = _interopRequireDefault(_IframeUploader);
+
 function empty() {}
 
-var Upload = React.createClass({
+var Upload = _react2['default'].createClass({
   displayName: 'Upload',
 
   propTypes: {
-    forceAjax: PropTypes.bool,
-    action: PropTypes.string,
-    name: PropTypes.string,
-    multipart: PropTypes.bool,
-    onError: PropTypes.func,
-    onSuccess: PropTypes.func,
-    onProgress: PropTypes.func,
-    onStart: PropTypes.func,
-    data: PropTypes.object,
-    accept: PropTypes.string,
-    multiple: PropTypes.bool
+    forceAjax: _react.PropTypes.bool,
+    action: _react.PropTypes.string,
+    name: _react.PropTypes.string,
+    multipart: _react.PropTypes.bool,
+    onError: _react.PropTypes.func,
+    onSuccess: _react.PropTypes.func,
+    onProgress: _react.PropTypes.func,
+    onStart: _react.PropTypes.func,
+    data: _react.PropTypes.object,
+    accept: _react.PropTypes.string,
+    multiple: _react.PropTypes.bool
   },
@@ -45,9 +58,10 @@
     if (props.forceAjax || typeof FormData !== 'undefined') {
-      return React.createElement(AjaxUpload, props);
+      return _react2['default'].createElement(_AjaxUploader2['default'], props);
     }
 
-    return React.createElement(IframeUpload, props);
+    return _react2['default'].createElement(_IframeUploader2['default'], props);
   }
 });
 
-module.exports = Upload;
+exports['default'] = Upload;
+module.exports = exports['default'];

package.json

 {
   "name": "rc-upload",
-  "version": "1.5.6",
+  "version": "1.6.0",
   "description": "upload ui component for react",
@@ -12,3 +12,6 @@ "keywords": [
   "homepage": "http://github.com/react-component/upload",
-  "author": "[e-mail]",
+  "maintainers": [
+    "[e-mail]",
+    "[e-mail]"
+  ],
   "repository": {
@@ -52,5 +55,4 @@ "type": "git",
   "dependencies": {
-    "rc-align": "1.x",
     "superagent": "1.x"
   }
 }

README.md

@@ -55,3 +55,2 @@ # rc-upload
 |forceAjax | bool | | force to use ajax render. used for server render |
-|getFormContainer| function(): HTMLElement| | used for iframe upload for ie8/9. get the container for form to be inserted |
 |multiple | boolean | false | only support ie10+|
@@ -58,0 +57,0 @@ |onStart | function| | start upload file |

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

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

13757

increased by3.7%

Dependency count

1

decreased by-50%

Worsened metrics

Lines of code

298

decreased by-7.74%

Number of low maintenance alerts

1

increased byInfinity%

Number of lines in readme file

75

decreased by-1.32%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedrc-align@1.x

• - Removedadd-dom-event-listener@1.1.0(transitive)

• - Removedclassnames@2.5.1(transitive)

• - Removeddom-align@1.12.4(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedrc-align@1.2.1(transitive)

• - Removedrc-util@2.1.1(transitive)