@hi-ui/hiui 2.15.11 → 2.15.12

package/es/upload/upload-legacy/Upload.js

@@ -0,0 +1,431 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _react = require("react");
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _shallowequal = _interopRequireDefault(require("shallowequal"));
+
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
+var fileId = 0;
+
+var Upload =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(Upload, _Component);
+
+  function Upload(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Upload);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(Upload).call(this, props));
+
+    var fileList = _this.prepareDefaultFileList(props.defaultFileList);
+
+    _this.state = {
+      fileList: fileList,
+      fileCountLimted: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Upload, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (!(0, _shallowequal["default"])(nextProps.defaultFileList, this.props.defaultFileList)) {
+        this.setState({
+          fileList: this.prepareDefaultFileList(nextProps.defaultFileList)
+        });
+      }
+    }
+  }, {
+    key: "prepareDefaultFileList",
+    value: function prepareDefaultFileList(fileList) {
+      var _this2 = this;
+
+      var _fileList = (0, _cloneDeep["default"])(fileList);
+
+      _fileList.map(function (file) {
+        file.fileId = _this2.getFileId();
+      });
+
+      return _fileList;
+    }
+  }, {
+    key: "getFileType",
+    value: function getFileType(file) {
+      var ext = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase();
+      var fileType = '';
+
+      switch (ext) {
+        case 'jpg':
+        case 'jpeg':
+        case 'gif':
+        case 'png':
+        case 'bmp':
+          fileType = 'img';
+          break;
+
+        case 'rar':
+        case 'zip':
+          fileType = 'zip';
+          break;
+
+        case 'doc':
+        case 'docx':
+          fileType = 'word';
+          break;
+
+        case 'pdf':
+          fileType = 'pdf';
+          break;
+
+        case 'ppt':
+        case 'pptx':
+          fileType = 'ppt';
+          break;
+
+        case 'xls':
+        case 'xlsx':
+          fileType = 'excel';
+          break;
+
+        case 'key':
+          fileType = 'key';
+          break;
+
+        case 'exe':
+        case 'dmg':
+          fileType = 'exe';
+          break;
+
+        case 'mp4':
+          fileType = 'video';
+          break;
+
+        case 'mp3':
+          fileType = 'audio';
+          break;
+
+        default:
+          fileType = 'other';
+          break;
+      }
+
+      return fileType;
+    }
+  }, {
+    key: "getFileId",
+    value: function getFileId() {
+      return "$$HIUI_FILE_ID_".concat(fileId++);
+    }
+  }, {
+    key: "uploadFiles",
+    value: function uploadFiles(files) {
+      var _this$props = this.props,
+          beforeUpload = _this$props.beforeUpload,
+          customUpload = _this$props.customUpload,
+          maxSize = _this$props.maxSize,
+          maxCount = _this$props.maxCount;
+      var _this$state = this.state,
+          fileList = _this$state.fileList,
+          fileCountLimted = _this$state.fileCountLimted;
+
+      if (fileCountLimted) {
+        return;
+      }
+
+      if (!beforeUpload(files, fileList)) {
+        return;
+      }
+
+      if (customUpload) {
+        customUpload(files);
+        return;
+      }
+
+      if (files.length === 0) return;
+
+      for (var key in files) {
+        if (!files.hasOwnProperty(key)) continue;
+        var file = files[key];
+
+        if (file.size > maxSize * 1024) {
+          return;
+        }
+
+        file.fileId = this.getFileId();
+        file.uploadState = 'loading';
+        file.fileType = this.getFileType(file);
+        fileList.unshift(file);
+        this.setState({
+          fileList: fileList
+        });
+        this.uploadFile(file);
+      }
+
+      if (fileList.length === maxCount) {
+        this.setState({
+          fileCountLimted: true
+        });
+      }
+
+      _reactDom["default"].findDOMNode(this.uploadRef).value = '';
+    }
+  }, {
+    key: "deleteFile",
+    value: function deleteFile(file, index) {
+      var _this3 = this;
+
+      var fileList = this.state.fileList;
+      var onRemove = this.props.onRemove;
+
+      var doRemove = function doRemove() {
+        fileList.splice(index, 1);
+
+        _this3.setState({
+          fileList: fileList,
+          fileCountLimted: false
+        });
+      };
+
+      var ret = onRemove(file, fileList, index);
+
+      if (ret === true) {
+        doRemove();
+      } else if (ret && typeof ret.then === 'function') {
+        ret.then(function (res) {
+          if (res === true) {
+            doRemove();
+          }
+        });
+      }
+    }
+  }, {
+    key: "onUpload",
+    value: function onUpload(file, fileList, response) {
+      var _this4 = this;
+
+      var onChange = this.props.onChange;
+
+      var onUploadError = function onUploadError() {
+        for (var index in fileList) {
+          if (fileList[index].fileId === file.fileId) {
+            fileList.splice(index, 1);
+
+            _this4.setState({
+              fileList: fileList
+            });
+
+            break;
+          }
+        }
+      };
+
+      var callback = function callback(ret) {
+        if (ret === false) {
+          onUploadError();
+        } else if (ret && typeof ret.then === 'function') {
+          ret.then(function (res) {
+            if (res === false) {
+              onUploadError();
+            }
+          });
+        }
+      };
+
+      onChange(file, fileList, response, callback);
+    }
+  }, {
+    key: "uploadFile",
+    value: function uploadFile(file) {
+      var _this5 = this;
+
+      var dataUrl = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+      var FileReader = window.FileReader;
+      var XMLHttpRequest = window.XMLHttpRequest;
+      var FormData = window.FormData;
+      var fileList = this.state.fileList;
+      var _this$props2 = this.props,
+          name = _this$props2.name,
+          param = _this$props2.param,
+          headers = _this$props2.headers,
+          uploadAction = _this$props2.uploadAction;
+
+      var onerror = function onerror(err) {
+        var errRes = err !== undefined ? err : {
+          status: xhr.status,
+          statusText: xhr.statusText
+        };
+        file.uploadState = 'error';
+
+        _this5.setState({
+          fileList: fileList
+        });
+
+        _this5.onUpload(file, fileList, errRes);
+      };
+
+      if (file.fileType === 'img') {
+        // 用来图片预览
+        if (dataUrl) {
+          file.url = dataUrl;
+        } else if (dataUrl !== false) {
+          var fr = new FileReader();
+
+          fr.onload = function (e) {
+            var url = e.target.result;
+            file.url = url;
+
+            _this5.setState({
+              fileList: fileList
+            });
+          };
+
+          fr.readAsDataURL(file);
+        }
+      }
+
+      var xhr = new XMLHttpRequest();
+      var formFile = new FormData();
+
+      if (dataUrl) {
+        formFile.append(name, dataUrl);
+      } else {
+        formFile.append(name, file);
+      } // 设置除file外需要带入的参数
+
+
+      if (param) {
+        for (var i in param) {
+          formFile.append(i, param[i]);
+        }
+      }
+
+      xhr.upload.onload = function () {
+        file.uploadState = 'success';
+
+        _this5.setState({
+          fileList: fileList
+        });
+      };
+
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+          if (xhr.status === 200) {
+            _this5.onUpload(file, fileList, JSON.parse(xhr.response));
+          } else {
+            onerror();
+          }
+        }
+      };
+
+      xhr.upload.onerror = function () {
+        onerror();
+      };
+
+      xhr.upload.onprogress = function (event) {
+        var e = event || window.event;
+        var percentComplete = Math.ceil(e.loaded / e.total * 100);
+        file.progressNumber = percentComplete;
+
+        _this5.setState({
+          fileList: fileList
+        });
+      };
+
+      xhr.open('post', uploadAction, true); // 设置用户传入的请求头
+
+      if (headers) {
+        for (var j in headers) {
+          xhr.setRequestHeader(j, headers[j]);
+        }
+      }
+
+      xhr.send(formFile);
+    }
+  }, {
+    key: "uploadStatusIcon",
+    value: function uploadStatusIcon(status) {
+      switch (status) {
+        case 'success':
+          return 'right';
+
+        case 'error':
+          return 'warning';
+
+        default:
+          return '';
+      }
+    }
+  }]);
+  return Upload;
+}(_react.Component);
+
+Upload.propTypes = {
+  type: _propTypes["default"].string,
+  accept: _propTypes["default"].string,
+  limit: _propTypes["default"].number,
+  buttonText: _propTypes["default"].string,
+  buttonIcon: _propTypes["default"].string,
+  uploadAction: _propTypes["default"].string,
+  param: _propTypes["default"].object,
+  name: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  headers: _propTypes["default"].object,
+  showUploadList: _propTypes["default"].bool,
+  multiple: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  customUpload: _propTypes["default"].func,
+  beforeUpload: _propTypes["default"].func,
+  defaultFileList: _propTypes["default"].array,
+  fileList: _propTypes["default"].array,
+  onRemove: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].bool]),
+  maxSize: _propTypes["default"].number
+};
+Upload.defaultProps = {
+  defaultFileList: [],
+  // headers: {'Content-type': 'multipart/form-data'}, // headers 不可以设置Content-type https://stackoverflow.com/questions/17415084/multipart-data-post-using-python-requests-no-multipart-boundary-was-found/17438575
+  headers: {},
+  accept: '',
+  limit: null,
+  buttonIcon: 'upload',
+  uploadAction: '',
+  param: null,
+  name: 'file',
+  disabled: false,
+  showUploadList: true,
+  multiple: false,
+  beforeUpload: function beforeUpload() {
+    return true;
+  },
+  onRemove: function onRemove() {
+    return true;
+  },
+  onChange: function onChange() {
+    return true;
+  } // overEvent: false
+
+};
+var _default = Upload;
+exports["default"] = _default;