@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/esm/Uploader.js

@@ -4,369 +4,318 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "uploadIcon", "uploadIconSize", "name", "accept", "defaultFileList", "listType", "disabled", "multiple", "url", "defaultImg", "headers", "timeout", "method", "xhrState", "withCredentials", "data", "isPreview", "isDeletable", "maximum", "capture", "maximize", "className", "autoUpload", "clearInput", "start", "removeImage", "change", "fileItemClick", "progress", "success", "update", "failure", "oversize", "beforeUpload", "beforeDelete"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React__default, { useState, useEffect, useImperativeHandle } from 'react';
-import classNames from 'classnames';
-import Icon from './Icon.js';
-import { c as cn } from './bem-893ad28d.js';
-import { useConfig } from './ConfigProvider.js';
-import '@bem-react/classname';
-
-var UploadOptions = /*#__PURE__*/_createClass(function UploadOptions() {
-  _classCallCheck(this, UploadOptions);
-
-  _defineProperty(this, "url", '');
-
-  _defineProperty(this, "name", 'file');
-
+var _excluded = ["children", "uploadIcon", "uploadLabel", "name", "accept", "defaultValue", "value", "previewType", "fit", "disabled", "multiple", "url", "previewUrl", "headers", "timeout", "method", "xhrState", "withCredentials", "data", "preview", "deletable", "maxCount", "capture", "maxFileSize", "className", "autoUpload", "clearInput", "onStart", "onDelete", "onChange", "onFileItemClick", "onProgress", "onSuccess", "onUpdate", "onFailure", "onOversize", "beforeUpload", "beforeXhrUpload", "beforeDelete"];
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+  return target;
+}
+import React__default, { useState, useEffect, useImperativeHandle } from "react";
+import classNames from "classnames";
+import { Failure, Loading, Link, Del, Photograph } from "@nutui/icons-react";
+import Progress from "./Progress.js";
+import { useConfig } from "./ConfigProvider.js";
+import { a as isPromise } from "./index.js";
+import { C as ComponentDefaults } from "./typings.js";
+var UploadOptions = /* @__PURE__ */ _createClass(function UploadOptions2() {
+  _classCallCheck(this, UploadOptions2);
+  _defineProperty(this, "url", "");
+  _defineProperty(this, "name", "file");
+  _defineProperty(this, "fileType", "image");
   _defineProperty(this, "formData", void 0);
-
-  _defineProperty(this, "method", 'post');
-
+  _defineProperty(this, "sourceFile", void 0);
+  _defineProperty(this, "method", "post");
   _defineProperty(this, "xhrState", 200);
-
-  _defineProperty(this, "timeout", 30 * 1000);
-
+  _defineProperty(this, "timeout", 30 * 1e3);
   _defineProperty(this, "headers", {});
-
   _defineProperty(this, "withCredentials", false);
-
   _defineProperty(this, "onStart", void 0);
-
   _defineProperty(this, "taroFilePath", void 0);
-
   _defineProperty(this, "onProgress", void 0);
-
   _defineProperty(this, "onSuccess", void 0);
-
   _defineProperty(this, "onFailure", void 0);
+  _defineProperty(this, "beforeXhrUpload", void 0);
 });
-
-var Upload = /*#__PURE__*/function () {
-  function Upload(options) {
-    _classCallCheck(this, Upload);
-
+var Upload = /* @__PURE__ */ function() {
+  function Upload2(options) {
+    _classCallCheck(this, Upload2);
     _defineProperty(this, "options", void 0);
-
     this.options = options;
   }
-
-  _createClass(Upload, [{
+  _createClass(Upload2, [{
     key: "upload",
     value: function upload() {
       var options = this.options;
       var xhr = new XMLHttpRequest();
       xhr.timeout = options.timeout;
-
       if (xhr.upload) {
         var _options$onStart;
-
-        xhr.upload.addEventListener('progress', function (e) {
+        xhr.upload.addEventListener("progress", function(e) {
           var _options$onProgress;
-
           (_options$onProgress = options.onProgress) === null || _options$onProgress === void 0 ? void 0 : _options$onProgress.call(options, e, options);
         }, false);
-
-        xhr.onreadystatechange = function () {
+        xhr.onreadystatechange = function() {
           if (xhr.readyState === 4) {
             if (xhr.status === options.xhrState) {
               var _options$onSuccess;
-
               (_options$onSuccess = options.onSuccess) === null || _options$onSuccess === void 0 ? void 0 : _options$onSuccess.call(options, xhr.responseText, options);
             } else {
               var _options$onFailure;
-
               (_options$onFailure = options.onFailure) === null || _options$onFailure === void 0 ? void 0 : _options$onFailure.call(options, xhr.responseText, options);
             }
           }
         };
-
         xhr.withCredentials = options.withCredentials;
-        xhr.open(options.method, options.url, true); // headers
-
+        xhr.open(options.method, options.url, true);
         for (var _i = 0, _Object$entries = Object.entries(options.headers); _i < _Object$entries.length; _i++) {
-          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-              key = _Object$entries$_i[0],
-              value = _Object$entries$_i[1];
-
+          var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2), key = _Object$entries$_i[0], value = _Object$entries$_i[1];
           xhr.setRequestHeader(key, value);
         }
-
         (_options$onStart = options.onStart) === null || _options$onStart === void 0 ? void 0 : _options$onStart.call(options, options);
-        xhr.send(options.formData);
+        if (options.beforeXhrUpload) {
+          options.beforeXhrUpload(xhr, options);
+        } else {
+          xhr.send(options.formData);
+        }
       } else {
-        console.warn('浏览器不支持 XMLHttpRequest');
+        console.warn("浏览器不支持 XMLHttpRequest");
       }
     }
   }]);
-
-  return Upload;
+  return Upload2;
 }();
-
-var defaultProps = {
-  url: '',
-  maximum: 1,
-  uploadIcon: 'photograph',
-  uploadIconSize: '',
-  listType: 'picture',
-  name: 'file',
-  accept: '*',
+var funcInterceptor = function funcInterceptor2(interceptor, _ref) {
+  var _ref$args = _ref.args, args = _ref$args === void 0 ? [] : _ref$args, done = _ref.done, canceled = _ref.canceled;
+  if (interceptor) {
+    var returnVal = interceptor.apply(null, args);
+    if (isPromise(returnVal)) {
+      returnVal.then(function(value) {
+        if (value) {
+          done(value);
+        } else if (canceled) {
+          canceled();
+        }
+      })["catch"](function() {
+      });
+    } else if (returnVal) {
+      done();
+    } else if (canceled) {
+      canceled();
+    }
+  } else {
+    done();
+  }
+};
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  url: "",
+  maxCount: 1,
+  previewType: "picture",
+  fit: "cover",
+  name: "file",
+  accept: "*",
   disabled: false,
   autoUpload: true,
   multiple: false,
-  maximize: Number.MAX_VALUE,
+  maxFileSize: Number.MAX_VALUE,
   data: {},
   headers: {},
-  method: 'post',
-  defaultImg: '',
+  method: "post",
   xhrState: 200,
-  timeout: 1000 * 30,
+  timeout: 1e3 * 30,
   withCredentials: false,
-  clearInput: false,
-  isPreview: true,
-  isDeletable: true,
+  clearInput: true,
+  preview: true,
+  deletable: true,
   capture: false,
   beforeDelete: function beforeDelete(file, files) {
     return true;
   }
-};
-
-var FileItem = /*#__PURE__*/_createClass(function FileItem() {
-  _classCallCheck(this, FileItem);
-
-  _defineProperty(this, "status", 'ready');
-
-  _defineProperty(this, "message", '准备中..');
-
-  _defineProperty(this, "uid", new Date().getTime().toString());
-
+});
+var FileItem = /* @__PURE__ */ _createClass(function FileItem2() {
+  _classCallCheck(this, FileItem2);
+  _defineProperty(this, "status", "ready");
+  _defineProperty(this, "message", "准备中..");
+  _defineProperty(this, "uid", /* @__PURE__ */ (/* @__PURE__ */ new Date()).getTime().toString());
   _defineProperty(this, "name", void 0);
-
   _defineProperty(this, "url", void 0);
-
   _defineProperty(this, "type", void 0);
-
+  _defineProperty(this, "path", void 0);
+  _defineProperty(this, "percentage", 0);
   _defineProperty(this, "formData", new FormData());
 });
-
-var InternalUploader = function InternalUploader(props, ref) {
-  var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-      children = _defaultProps$props.children,
-      uploadIcon = _defaultProps$props.uploadIcon,
-      uploadIconSize = _defaultProps$props.uploadIconSize,
-      name = _defaultProps$props.name,
-      accept = _defaultProps$props.accept,
-      defaultFileList = _defaultProps$props.defaultFileList,
-      listType = _defaultProps$props.listType,
-      disabled = _defaultProps$props.disabled,
-      multiple = _defaultProps$props.multiple,
-      url = _defaultProps$props.url,
-      defaultImg = _defaultProps$props.defaultImg,
-      headers = _defaultProps$props.headers,
-      timeout = _defaultProps$props.timeout,
-      method = _defaultProps$props.method,
-      xhrState = _defaultProps$props.xhrState,
-      withCredentials = _defaultProps$props.withCredentials,
-      data = _defaultProps$props.data,
-      isPreview = _defaultProps$props.isPreview,
-      isDeletable = _defaultProps$props.isDeletable,
-      maximum = _defaultProps$props.maximum,
-      capture = _defaultProps$props.capture,
-      maximize = _defaultProps$props.maximize,
-      className = _defaultProps$props.className,
-      autoUpload = _defaultProps$props.autoUpload,
-      clearInput = _defaultProps$props.clearInput,
-      start = _defaultProps$props.start,
-      removeImage = _defaultProps$props.removeImage,
-      change = _defaultProps$props.change,
-      fileItemClick = _defaultProps$props.fileItemClick,
-      progress = _defaultProps$props.progress,
-      success = _defaultProps$props.success,
-      update = _defaultProps$props.update,
-      failure = _defaultProps$props.failure,
-      oversize = _defaultProps$props.oversize,
-      beforeUpload = _defaultProps$props.beforeUpload,
-      beforeDelete = _defaultProps$props.beforeDelete,
-      restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      fileList = _useState2[0],
-      setFileList = _useState2[1];
-
-  var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      uploadQueue = _useState4[0],
-      setUploadQueue = _useState4[1];
-
-  useEffect(function () {
-    console.log('defaultFileList', defaultFileList);
-
-    if (defaultFileList) {
-      setFileList(defaultFileList);
+var InternalUploader = function InternalUploader2(props, ref) {
+  var _useConfig = useConfig(), locale = _useConfig.locale;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, uploadIcon = _defaultProps$props.uploadIcon, uploadLabel = _defaultProps$props.uploadLabel, name = _defaultProps$props.name, accept = _defaultProps$props.accept, defaultValue = _defaultProps$props.defaultValue, value = _defaultProps$props.value, previewType = _defaultProps$props.previewType, fit = _defaultProps$props.fit, disabled = _defaultProps$props.disabled, multiple = _defaultProps$props.multiple, url = _defaultProps$props.url, previewUrl = _defaultProps$props.previewUrl, headers = _defaultProps$props.headers, timeout = _defaultProps$props.timeout, method = _defaultProps$props.method, xhrState = _defaultProps$props.xhrState, withCredentials = _defaultProps$props.withCredentials, data = _defaultProps$props.data, preview = _defaultProps$props.preview, deletable = _defaultProps$props.deletable, maxCount = _defaultProps$props.maxCount, capture = _defaultProps$props.capture, maxFileSize = _defaultProps$props.maxFileSize, className = _defaultProps$props.className, autoUpload = _defaultProps$props.autoUpload, clearInput = _defaultProps$props.clearInput, onStart = _defaultProps$props.onStart, onDelete = _defaultProps$props.onDelete, onChange = _defaultProps$props.onChange, onFileItemClick = _defaultProps$props.onFileItemClick, onProgress = _defaultProps$props.onProgress, onSuccess = _defaultProps$props.onSuccess, onUpdate = _defaultProps$props.onUpdate, onFailure = _defaultProps$props.onFailure, onOversize = _defaultProps$props.onOversize, beforeUpload = _defaultProps$props.beforeUpload, beforeXhrUpload = _defaultProps$props.beforeXhrUpload, beforeDelete2 = _defaultProps$props.beforeDelete, restProps = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _useState = useState(defaultValue || []), _useState2 = _slicedToArray(_useState, 2), fileList = _useState2[0], setFileList = _useState2[1];
+  var _useState3 = useState([]), _useState4 = _slicedToArray(_useState3, 2), uploadQueue = _useState4[0], setUploadQueue = _useState4[1];
+  useEffect(function() {
+    if (value) {
+      setFileList(value);
     }
-  }, [defaultFileList]);
-  var b = cn('uploader');
-  var classes = classNames(className, b(''));
-  useImperativeHandle(ref, function () {
+  }, [value]);
+  var classes = classNames(className, "nut-uploader");
+  useImperativeHandle(ref, function() {
     return {
       submit: function submit() {
-        Promise.all(uploadQueue).then(function (res) {
-          res.forEach(function (i) {
+        Promise.all(uploadQueue).then(function(res) {
+          res.forEach(function(i) {
             return i.upload();
           });
         });
+      },
+      clear: function clear() {
+        clearUploadQueue();
       }
     };
   });
-
-  var clearUploadQueue = function clearUploadQueue() {
-    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-
+  var clearUploadQueue = function clearUploadQueue2() {
+    var index = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : -1;
     if (index > -1) {
       uploadQueue.splice(index, 1);
       setUploadQueue(uploadQueue);
     } else {
       setUploadQueue([]);
+      fileList.splice(0, fileList.length);
+      setFileList(_toConsumableArray(fileList));
     }
   };
-
-  var clearInputValue = function clearInputValue(el) {
-    el.value = '';
+  var clearInputValue = function clearInputValue2(el) {
+    el.value = "";
   };
-
-  var executeUpload = function executeUpload(fileItem, index) {
+  var executeUpload = function executeUpload2(fileItem, index) {
     var uploadOption = new UploadOptions();
     uploadOption.url = url;
-
     for (var _i2 = 0, _Object$entries2 = Object.entries(data); _i2 < _Object$entries2.length; _i2++) {
-      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
-          key = _Object$entries2$_i[0],
-          value = _Object$entries2$_i[1];
-
-      fileItem.formData.append(key, value);
+      var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2), key = _Object$entries2$_i[0], value2 = _Object$entries2$_i[1];
+      fileItem.formData.append(key, value2);
     }
-
     uploadOption.formData = fileItem.formData;
     uploadOption.timeout = timeout * 1;
     uploadOption.method = method;
     uploadOption.xhrState = xhrState;
     uploadOption.headers = headers;
     uploadOption.withCredentials = withCredentials;
-
-    uploadOption.onStart = function (option) {
+    uploadOption.beforeXhrUpload = beforeXhrUpload;
+    try {
+      uploadOption.sourceFile = fileItem.formData.get(name);
+    } catch (error) {
+    }
+    uploadOption.onStart = function(option) {
       clearUploadQueue(index);
-      setFileList(function (fileList) {
-        fileList.map(function (item) {
+      setFileList(function(fileList2) {
+        fileList2.map(function(item) {
           if (item.uid === fileItem.uid) {
-            item.status = 'ready';
+            item.status = "ready";
             item.message = locale.uploader.readyUpload;
           }
-
           return item;
         });
-        return _toConsumableArray(fileList);
+        return _toConsumableArray(fileList2);
       });
-      start && start(option);
+      onStart && onStart(option);
     };
-
-    uploadOption.onProgress = function (e, option) {
-      setFileList(function (fileList) {
-        fileList.map(function (item) {
+    uploadOption.onProgress = function(e, option) {
+      setFileList(function(fileList2) {
+        fileList2.map(function(item) {
           if (item.uid === fileItem.uid) {
-            item.status = 'uploading';
+            item.status = "uploading";
             item.message = locale.uploader.uploading;
+            item.percentage = (e.loaded / e.total * 100).toFixed(0);
+            onProgress && onProgress({
+              e,
+              option,
+              percentage: item.percentage
+            });
           }
-
           return item;
         });
-        return _toConsumableArray(fileList);
-      });
-      progress && progress({
-        e: e,
-        option: option
+        return _toConsumableArray(fileList2);
       });
     };
-
-    uploadOption.onSuccess = function (responseText, option) {
-      setFileList(function (fileList) {
-        update && update(fileList);
-        fileList.map(function (item) {
+    uploadOption.onSuccess = function(responseText, option) {
+      setFileList(function(fileList2) {
+        onUpdate && onUpdate(fileList2);
+        fileList2.map(function(item) {
           if (item.uid === fileItem.uid) {
-            item.status = 'success';
+            item.status = "success";
             item.message = locale.uploader.success;
           }
-
           return item;
         });
-        return _toConsumableArray(fileList);
+        return _toConsumableArray(fileList2);
       });
-      success && success({
-        responseText: responseText,
-        option: option
+      onSuccess && onSuccess({
+        responseText,
+        option,
+        fileList
       });
     };
-
-    uploadOption.onFailure = function (responseText, option) {
-      setFileList(function (fileList) {
-        fileList.map(function (item) {
+    uploadOption.onFailure = function(responseText, option) {
+      setFileList(function(fileList2) {
+        fileList2.map(function(item) {
           if (item.uid === fileItem.uid) {
-            item.status = 'error';
+            item.status = "error";
             item.message = locale.uploader.error;
           }
-
           return item;
         });
-        return _toConsumableArray(fileList);
+        return _toConsumableArray(fileList2);
       });
-      failure && failure({
-        responseText: responseText,
-        option: option
+      onFailure && onFailure({
+        responseText,
+        option,
+        fileList
       });
     };
-
     var task = new Upload(uploadOption);
-
     if (props.autoUpload) {
       task.upload();
     } else {
-      uploadQueue.push(new Promise(function (resolve, reject) {
+      uploadQueue.push(new Promise(function(resolve, reject) {
         resolve(task);
       }));
       setUploadQueue(uploadQueue);
     }
   };
-
-  var readFile = function readFile(files) {
-    files.forEach(function (file, index) {
+  var readFile = function readFile2(files) {
+    files.forEach(function(file, index) {
       var formData = new FormData();
       formData.append(name, file);
       var fileItem = new FileItem();
       fileItem.name = file.name;
-      fileItem.status = 'ready';
+      fileItem.status = "ready";
       fileItem.type = file.type;
       fileItem.formData = formData;
       fileItem.uid = file.lastModified + fileItem.uid;
-      fileItem.message = locale.uploader.readyUpload;
+      if (autoUpload) {
+        fileItem.message = locale.uploader.readyUpload;
+      } else {
+        fileItem.message = locale.uploader.waitingUpload;
+      }
       executeUpload(fileItem, index);
-
-      if (isPreview && file.type.includes('image')) {
+      if (preview && file.type.includes("image")) {
         var reader = new FileReader();
-
-        reader.onload = function (event) {
+        reader.onload = function(event) {
           fileItem.url = event.target.result;
           fileList.push(fileItem);
           setFileList(_toConsumableArray(fileList));
         };
-
         reader.readAsDataURL(file);
       } else {
         fileList.push(fileItem);
@@ -374,136 +323,127 @@ var InternalUploader = function InternalUploader(props, ref) {
       }
     });
   };
-
-  var filterFiles = function filterFiles(files) {
-    var maximum = props.maximum * 1;
+  var filterFiles = function filterFiles2(files) {
+    var maximum = props.maxCount * 1;
     var oversizes = new Array();
-    var filterFile = files.filter(function (file) {
-      if (file.size > maximize) {
+    var filterFile = files.filter(function(file) {
+      if (file.size > maxFileSize) {
         oversizes.push(file);
         return false;
       }
-
       return true;
     });
-
     if (oversizes.length) {
-      oversize && oversize(files);
+      onOversize && onOversize(files);
     }
-
     if (filterFile.length > maximum) {
       filterFile.splice(maximum, filterFile.length - maximum);
     }
-
     if (fileList.length !== 0) {
       var index = maximum - fileList.length;
       filterFile.splice(index, filterFile.length - index);
     }
-
     return filterFile;
   };
-
-  var onDelete = function onDelete(file, index) {
+  var deleted = function deleted2(file, index) {
+    fileList.splice(index, 1);
+    onDelete && onDelete(file, fileList);
+    setFileList(_toConsumableArray(fileList));
+  };
+  var onDeleteItem = function onDeleteItem2(file, index) {
     clearUploadQueue(index);
-
-    if (beforeDelete && beforeDelete(file, fileList)) {
-      fileList.splice(index, 1);
-      removeImage && removeImage(file, fileList);
-      setFileList(_toConsumableArray(fileList));
-    } else {
-      console.log(locale.uploader.deleteWord);
-    }
+    funcInterceptor(beforeDelete2, {
+      args: [file, fileList],
+      done: function done() {
+        return deleted(file, index);
+      }
+    });
   };
-
-  var fileChange = function fileChange(event) {
+  var fileChange = function fileChange2(event) {
     if (disabled) {
       return;
     }
-
     var $el = event.target;
     var files = $el.files;
-
     if (beforeUpload) {
-      beforeUpload(new Array().slice.call(files)).then(function (f) {
-        var _files = filterFiles(new Array().slice.call(f));
-
-        readFile(_files);
+      beforeUpload(new Array().slice.call(files)).then(function(f) {
+        var _files2 = filterFiles(new Array().slice.call(f));
+        readFile(_files2);
       });
     } else {
       var _files = filterFiles(new Array().slice.call(files));
-
       readFile(_files);
     }
-
-    props.change && props.change({
-      fileList: fileList,
-      event: event
+    onChange && onChange({
+      fileList,
+      event
     });
-
     if (clearInput) {
       clearInputValue($el);
     }
   };
-
-  var handleItemClick = function handleItemClick(file) {
-    fileItemClick && fileItemClick(file);
+  var handleItemClick = function handleItemClick2(file) {
+    onFileItemClick && onFileItemClick(file);
   };
-
   return React__default.createElement("div", _objectSpread({
     className: classes
   }, restProps), children && React__default.createElement("div", {
     className: "nut-uploader__slot"
-  }, React__default.createElement(React__default.Fragment, null, children, maximum > fileList.length && React__default.createElement(React__default.Fragment, null, capture ? React__default.createElement("input", {
+  }, React__default.createElement(React__default.Fragment, null, children, maxCount > fileList.length && React__default.createElement(React__default.Fragment, null, capture ? React__default.createElement("input", {
     className: "nut-uploader__input",
     type: "file",
     capture: "user",
-    name: name,
-    accept: accept,
-    disabled: disabled,
-    multiple: multiple,
+    name,
+    accept,
+    disabled,
+    multiple,
     onChange: fileChange
   }) : React__default.createElement("input", {
     className: "nut-uploader__input",
     type: "file",
-    name: name,
-    accept: accept,
-    disabled: disabled,
-    multiple: multiple,
+    name,
+    accept,
+    disabled,
+    multiple,
     onChange: fileChange
-  })))), fileList.length !== 0 && fileList.map(function (item, index) {
+  })))), fileList.length !== 0 && fileList.map(function(item, index) {
     return React__default.createElement("div", {
-      className: "nut-uploader__preview ".concat(listType),
+      className: "nut-uploader__preview ".concat(previewType),
       key: item.uid
-    }, listType === 'picture' && !children && React__default.createElement("div", {
+    }, previewType === "picture" && !children && React__default.createElement("div", {
       className: "nut-uploader__preview-img"
-    }, item.status === 'ready' ? React__default.createElement("div", {
+    }, deletable && React__default.createElement(Failure, {
+      color: "rgba(0,0,0,0.6)",
+      className: "close",
+      onClick: function onClick() {
+        return onDeleteItem(item, index);
+      }
+    }), item.status === "ready" ? React__default.createElement("div", {
       className: "nut-uploader__preview__progress"
     }, React__default.createElement("div", {
       className: "nut-uploader__preview__progress__msg"
-    }, item.message)) : item.status !== 'success' && React__default.createElement("div", {
+    }, item.message)) : item.status !== "success" && React__default.createElement("div", {
       className: "nut-uploader__preview__progress"
-    }, React__default.createElement(Icon, {
-      color: "#fff",
-      name: "".concat(item.status === 'error' ? 'failure' : 'loading')
-    }), React__default.createElement("div", {
+    }, item.failIcon !== " " && item.loadingIcon !== " " && (item.status === "error" ? item.failIcon || React__default.createElement(Failure, {
+      color: "#fff"
+    }) : item.loadingIcon || React__default.createElement(Loading, {
+      className: "nut-icon-loading",
+      color: "#fff"
+    })), React__default.createElement("div", {
       className: "nut-uploader__preview__progress__msg"
-    }, item.message)), isDeletable && React__default.createElement(Icon, {
-      color: "rgba(0,0,0,0.6)",
-      className: "close",
-      name: "failure",
-      onClick: function onClick() {
-        return onDelete(item, index);
-      }
-    }), item.type.includes('image') ? React__default.createElement(React__default.Fragment, null, item.url && React__default.createElement("img", {
+    }, item.message)), item.type.includes("image") ? React__default.createElement(React__default.Fragment, null, item.url && React__default.createElement("img", {
       className: "nut-uploader__preview-img__c",
+      style: {
+        objectFit: fit
+      },
       src: item.url,
       alt: "",
       onClick: function onClick() {
         return handleItemClick(item);
       }
-    })) : React__default.createElement(React__default.Fragment, null, defaultImg ? React__default.createElement("img", {
+    })) : React__default.createElement(React__default.Fragment, null, previewUrl ? React__default.createElement("img", {
       className: "nut-uploader__preview-img__c",
-      src: defaultImg,
+      src: previewUrl,
       alt: "",
       onClick: function onClick() {
         return handleItemClick(item);
@@ -515,55 +455,60 @@ var InternalUploader = function InternalUploader(props, ref) {
         return handleItemClick(item);
       },
       className: "nut-uploader__preview-img__file__name"
-    }, React__default.createElement(Icon, {
-      color: "#808080",
-      name: "link"
-    }), "\xA0", item.name))), React__default.createElement("div", {
+    }, React__default.createElement(Link, {
+      color: "#808080"
+    }), " ", item.name))), item.status === "success" ? React__default.createElement("div", {
       className: "tips"
-    }, item.name)), listType === 'list' && React__default.createElement("div", {
+    }, item.name) : null), previewType === "list" && React__default.createElement("div", {
       className: "nut-uploader__preview-list"
     }, React__default.createElement("div", {
       className: "nut-uploader__preview-img__file__name ".concat(item.status),
       onClick: function onClick() {
         return handleItemClick(item);
       }
-    }, React__default.createElement(Icon, {
-      name: "link"
-    }), "\xA0", item.name), React__default.createElement(Icon, {
+    }, React__default.createElement(Link, null), " ", item.name), deletable && React__default.createElement(Del, {
       color: "#808080",
       className: "nut-uploader__preview-img__file__del",
-      name: "del",
       onClick: function onClick() {
-        return onDelete(item, index);
+        return onDeleteItem(item, index);
       }
+    }), item.status === "uploading" && React__default.createElement(Progress, {
+      percent: item.percentage,
+      color: "linear-gradient(270deg, rgba(18,126,255,1) 0%,rgba(32,147,255,1) 32.815625%,rgba(13,242,204,1) 100%)",
+      showText: false
     })));
-  }), maximum > fileList.length && listType === 'picture' && !children && React__default.createElement("div", {
-    className: "nut-uploader__upload ".concat(listType)
-  }, React__default.createElement(Icon, {
-    size: uploadIconSize,
-    color: "#808080",
-    name: uploadIcon
-  }), capture ? React__default.createElement("input", {
+  }), maxCount > fileList.length && previewType === "picture" && !children && React__default.createElement("div", {
+    className: "nut-uploader__upload ".concat(previewType, " ").concat(disabled ? "nut-uploader__upload-disabled" : "")
+  }, React__default.createElement("div", {
+    className: "nut-uploader__icon"
+  }, uploadIcon || React__default.createElement(Photograph, {
+    width: "20px",
+    height: "20px",
+    color: "#808080"
+  }), React__default.createElement("span", {
+    className: "nut-uploader__icon-tip"
+  }, uploadLabel)), capture ? React__default.createElement("input", {
     className: "nut-uploader__input",
     type: "file",
     capture: "user",
-    name: name,
-    accept: accept,
-    disabled: disabled,
-    multiple: multiple,
+    name,
+    accept,
+    disabled,
+    multiple,
     onChange: fileChange
   }) : React__default.createElement("input", {
     className: "nut-uploader__input",
     type: "file",
-    name: name,
-    accept: accept,
-    disabled: disabled,
-    multiple: multiple,
+    name,
+    accept,
+    disabled,
+    multiple,
     onChange: fileChange
   })));
 };
-
 var Uploader = React__default.forwardRef(InternalUploader);
 Uploader.defaultProps = defaultProps;
-Uploader.displayName = 'NutUploader';
-export { Uploader as default };
+Uploader.displayName = "NutUploader";
+export {
+  Uploader as default
+};