xdesign-vue-next/lib/upload/hooks/useUpload.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { ref, toRefs, computed } from 'vue';
import merge from 'lodash/merge';
import { getTriggerTextField, getDisplayFiles, formatToUploadFile, validateFile, getFilesAndErrors, upload } from '../../_common/js/upload/main.js';
import { getFileList } from '../../_common/js/upload/utils.js';
import useVModel from '../../hooks/useVModel.js';
import { useConfig } from '../../config-provider/useConfig.js';
import '@babel/runtime/helpers/toArray';
import 'lodash/isFunction';
import 'lodash/isNumber';
import '../../_common/js/upload/xhr.js';
import '@babel/runtime/helpers/typeof';
import '../../_common/js/log/log.js';
import 'lodash/kebabCase';
import 'lodash/cloneDeep';
import 'lodash/isString';
import '../../config-provider/context.js';
import 'lodash/mergeWith';
import '../../_common/js/global-config/default-config.js';
import '../../_common/js/global-config/locale/en_US.js';
import '../../_chunks/dep-3a1cce9f.js';
import 'lodash/isArray';

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; }
function useUpload(props) {
  var inputRef = ref();
  var _toRefs = toRefs(props),
    disabled = _toRefs.disabled,
    autoUpload = _toRefs.autoUpload,
    isBatchUpload = _toRefs.isBatchUpload,
    multiple = _toRefs.multiple,
    files = _toRefs.files,
    modelValue = _toRefs.modelValue,
    defaultFiles = _toRefs.defaultFiles;
  var _useConfig = useConfig("upload"),
    globalConfig = _useConfig.globalConfig,
    t = _useConfig.t,
    classPrefix = _useConfig.classPrefix;
  var _useVModel = useVModel(files, modelValue, defaultFiles.value, props.onChange, "files"),
    _useVModel2 = _slicedToArray(_useVModel, 2),
    uploadValue = _useVModel2[0],
    setUploadValue = _useVModel2[1];
  var xhrReq = ref([]);
  var toUploadFiles = ref([]);
  var sizeOverLimitMessage = ref("");
  var locale = computed(function () {
    return merge({}, globalConfig.value, props.locale);
  });
  var tipsClasses = "".concat(classPrefix.value, "-upload__tips ").concat(classPrefix.value, "-size-s");
  var errorClasses = [tipsClasses].concat("".concat(classPrefix.value, "-upload__tips-error"));
  var placeholderClass = "".concat(classPrefix.value, "-upload__placeholder");
  var triggerUploadText = computed(function () {
    var _uploadValue$value;
    var field = getTriggerTextField({
      isBatchUpload: isBatchUpload.value,
      multiple: multiple.value,
      status: (_uploadValue$value = uploadValue.value) === null || _uploadValue$value === void 0 || (_uploadValue$value = _uploadValue$value[0]) === null || _uploadValue$value === void 0 ? void 0 : _uploadValue$value.status,
      autoUpload: autoUpload.value
    });
    return locale.value.triggerUploadText[field];
  });
  var uploading = ref(false);
  var displayFiles = computed(function () {
    return getDisplayFiles({
      multiple: props.multiple,
      toUploadFiles: toUploadFiles.value,
      uploadValue: uploadValue.value,
      autoUpload: autoUpload.value,
      isBatchUpload: isBatchUpload.value
    });
  });
  var uploadFilePercent = function uploadFilePercent(params) {
    var file = params.file,
      percent = params.percent;
    var index = toUploadFiles.value.findIndex(function (item) {
      return file.raw === item.raw;
    });
    toUploadFiles.value[index] = _objectSpread(_objectSpread({}, toUploadFiles.value[index]), {}, {
      percent: percent
    });
  };
  var updateFilesProgress = function updateFilesProgress() {
    if (props.autoUpload) {
      toUploadFiles.value = _toConsumableArray(toUploadFiles.value);
    }
  };
  var onResponseError = function onResponseError(p) {
    var _props$onOneFileFail;
    if (!p || !p.files || !p.files[0]) return;
    var response = p.response,
      event = p.event,
      files2 = p.files;
    updateFilesProgress();
    (_props$onOneFileFail = props.onOneFileFail) === null || _props$onOneFileFail === void 0 ? void 0 : _props$onOneFileFail.call(props, {
      e: event,
      file: files2 === null || files2 === void 0 ? void 0 : files2[0],
      currentFiles: files2,
      failedFiles: files2,
      response: response
    });
    if (!props.multiple || props.isBatchUpload) {
      setUploadValue([], {
        trigger: "progress-fail",
        e: p.event,
        file: p.files[0]
      });
    }
  };
  var onResponseProgress = function onResponseProgress(p) {
    var _props$onProgress;
    updateFilesProgress();
    (_props$onProgress = props.onProgress) === null || _props$onProgress === void 0 ? void 0 : _props$onProgress.call(props, {
      e: p.event,
      file: p.file,
      currentFiles: p.files,
      percent: p.percent,
      type: p.type,
      XMLHttpRequest: p.XMLHttpRequest
    });
  };
  var onResponseSuccess = function onResponseSuccess(p) {
    if (props.multiple && !props.uploadAllFilesInOneRequest) {
      var _props$onOneFileSucce;
      updateFilesProgress();
      (_props$onOneFileSucce = props.onOneFileSuccess) === null || _props$onOneFileSucce === void 0 ? void 0 : _props$onOneFileSucce.call(props, {
        e: p.event,
        file: p.files[0],
        response: p.response
      });
    }
  };
  function getSizeLimitError(sizeLimitObj) {
    var limit = sizeLimitObj;
    return limit.message ? t(limit.message, {
      sizeLimit: limit.size
    }) : "".concat(t(locale.value.sizeLimitMessage, {
      sizeLimit: limit.size
    }), " ").concat(limit.unit);
  }
  var handleNotAutoUpload = function handleNotAutoUpload(toFiles) {
    var tmpFiles = props.multiple && !isBatchUpload.value ? uploadValue.value.concat(toFiles) : toFiles;
    if (!tmpFiles.length) return;
    setUploadValue(tmpFiles, {
      trigger: "add",
      index: uploadValue.value.length,
      file: toFiles[0],
      files: toFiles
    });
    toUploadFiles.value = [];
  };
  var onFileChange = function onFileChange(files2) {
    var _props$onSelectChange;
    if (disabled.value) return;
    var params = {
      currentSelectedFiles: formatToUploadFile(_toConsumableArray(files2), props.format)
    };
    (_props$onSelectChange = props.onSelectChange) === null || _props$onSelectChange === void 0 ? void 0 : _props$onSelectChange.call(props, _toConsumableArray(files2), params);
    validateFile({
      uploadValue: uploadValue.value,
      files: _toConsumableArray(files2),
      allowUploadDuplicateFile: props.allowUploadDuplicateFile,
      max: props.max,
      sizeLimit: props.sizeLimit,
      isBatchUpload: isBatchUpload.value,
      autoUpload: autoUpload.value,
      format: props.format,
      beforeUpload: props.beforeUpload,
      beforeAllFilesUpload: props.beforeAllFilesUpload
    }).then(function (args) {
      var _args$validateResult;
      if (((_args$validateResult = args.validateResult) === null || _args$validateResult === void 0 ? void 0 : _args$validateResult.type) === "BEFORE_ALL_FILES_UPLOAD") {
        var _props$onValidate;
        var params2 = {
          type: "BEFORE_ALL_FILES_UPLOAD",
          files: args.files
        };
        (_props$onValidate = props.onValidate) === null || _props$onValidate === void 0 ? void 0 : _props$onValidate.call(props, params2);
        return;
      }
      if (args.lengthOverLimit) {
        var _props$onValidate2;
        var _params = {
          type: "FILES_OVER_LENGTH_LIMIT",
          files: args.files
        };
        (_props$onValidate2 = props.onValidate) === null || _props$onValidate2 === void 0 ? void 0 : _props$onValidate2.call(props, _params);
        if (!args.files.length) return;
      }
      if (args.hasSameNameFile) {
        var _props$onValidate3;
        var _params2 = {
          type: "FILTER_FILE_SAME_NAME",
          files: args.files
        };
        (_props$onValidate3 = props.onValidate) === null || _props$onValidate3 === void 0 ? void 0 : _props$onValidate3.call(props, _params2);
      }
      if (args.fileValidateList instanceof Array) {
        var _props$onWaitingUploa;
        var _getFilesAndErrors = getFilesAndErrors(args.fileValidateList, getSizeLimitError),
          sizeLimitErrors = _getFilesAndErrors.sizeLimitErrors,
          beforeUploadErrorFiles = _getFilesAndErrors.beforeUploadErrorFiles,
          toFiles = _getFilesAndErrors.toFiles;
        var tmpWaitingFiles = autoUpload.value ? toFiles : toUploadFiles.value.concat(toFiles);
        toUploadFiles.value = tmpWaitingFiles;
        (_props$onWaitingUploa = props.onWaitingUploadFilesChange) === null || _props$onWaitingUploa === void 0 ? void 0 : _props$onWaitingUploa.call(props, {
          files: tmpWaitingFiles,
          trigger: "validate"
        });
        if (sizeLimitErrors[0]) {
          var _props$onValidate4;
          sizeOverLimitMessage.value = sizeLimitErrors[0].file.response.error;
          (_props$onValidate4 = props.onValidate) === null || _props$onValidate4 === void 0 ? void 0 : _props$onValidate4.call(props, {
            type: "FILE_OVER_SIZE_LIMIT",
            files: sizeLimitErrors.map(function (t2) {
              return t2.file;
            })
          });
        } else {
          sizeOverLimitMessage.value = "";
          if (beforeUploadErrorFiles.length) {
            var _props$onValidate5;
            var _params3 = {
              type: "CUSTOM_BEFORE_UPLOAD",
              files: beforeUploadErrorFiles
            };
            (_props$onValidate5 = props.onValidate) === null || _props$onValidate5 === void 0 ? void 0 : _props$onValidate5.call(props, _params3);
          }
        }
        if (autoUpload.value) {
          uploadFiles(tmpWaitingFiles);
        } else {
          handleNotAutoUpload(tmpWaitingFiles);
        }
      }
    });
    inputRef.value.value = null;
  };
  var onNormalFileChange = function onNormalFileChange(e) {
    var fileList = getFileList(e.target.files);
    onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(fileList);
  };
  function onDragFileChange(files2) {
    onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(files2);
  }
  function onPasteFileChange(e) {
    onFileChange === null || onFileChange === void 0 ? void 0 : onFileChange(_toConsumableArray(e.clipboardData.items).map(function (file) {
      return file.getAsFile();
    }));
  }
  function uploadFiles(toFiles) {
    var notUploadedFiles = uploadValue.value.filter(function (t2) {
      return t2.status !== "success";
    });
    var files2 = autoUpload.value ? toFiles || toUploadFiles.value : notUploadedFiles;
    if (!files2 || !files2.length) return;
    uploading.value = true;
    xhrReq.value = [];
    upload({
      action: props.action,
      headers: props.headers,
      method: props.method,
      name: props.name,
      withCredentials: props.withCredentials,
      uploadedFiles: uploadValue.value,
      toUploadFiles: files2,
      multiple: props.multiple,
      isBatchUpload: isBatchUpload.value,
      autoUpload: props.autoUpload,
      uploadAllFilesInOneRequest: props.uploadAllFilesInOneRequest,
      useMockProgress: props.useMockProgress,
      data: props.data,
      mockProgressDuration: props.mockProgressDuration,
      requestMethod: props.requestMethod,
      formatRequest: props.formatRequest,
      formatResponse: props.formatResponse,
      onResponseProgress: onResponseProgress,
      onResponseSuccess: onResponseSuccess,
      onResponseError: onResponseError,
      setXhrObject: function setXhrObject(xhr) {
        var _xhr$files$;
        if ((_xhr$files$ = xhr.files[0]) !== null && _xhr$files$ !== void 0 && _xhr$files$.raw && xhrReq.value.find(function (item) {
          var _item$files$;
          return ((_item$files$ = item.files[0]) === null || _item$files$ === void 0 ? void 0 : _item$files$.raw) === xhr.files[0].raw;
        })) return;
        xhrReq.value = xhrReq.value.concat(xhr);
      }
    }).then(function (_ref) {
      var status = _ref.status,
        data = _ref.data,
        list = _ref.list,
        failedFiles = _ref.failedFiles;
      uploading.value = false;
      if (status === "success") {
        var _props$onSuccess;
        setUploadValue(_toConsumableArray(data.files), {
          trigger: "add",
          file: data.files[0]
        });
        xhrReq.value = [];
        (_props$onSuccess = props.onSuccess) === null || _props$onSuccess === void 0 ? void 0 : _props$onSuccess.call(props, {
          fileList: data.files,
          currentFiles: files2,
          file: files2[0],
          results: list === null || list === void 0 ? void 0 : list.map(function (t2) {
            return t2.data;
          }),
          response: data.response || list.map(function (t2) {
            return t2.data.response;
          }),
          XMLHttpRequest: data.XMLHttpRequest
        });
      } else if (failedFiles !== null && failedFiles !== void 0 && failedFiles[0]) {
        var _props$onFail;
        (_props$onFail = props.onFail) === null || _props$onFail === void 0 ? void 0 : _props$onFail.call(props, {
          e: data.event,
          file: failedFiles[0],
          failedFiles: failedFiles,
          currentFiles: files2,
          response: data.response,
          XMLHttpRequest: data.XMLHttpRequest
        });
      }
      if (autoUpload.value) {
        var _props$onWaitingUploa2;
        toUploadFiles.value = failedFiles;
        (_props$onWaitingUploa2 = props.onWaitingUploadFilesChange) === null || _props$onWaitingUploa2 === void 0 ? void 0 : _props$onWaitingUploa2.call(props, {
          files: failedFiles,
          trigger: "uploaded"
        });
      }
    });
  }
  function onInnerRemove(p) {
    var _p$e$stopPropagation, _p$e, _props$onRemove;
    sizeOverLimitMessage.value = "";
    (_p$e$stopPropagation = (_p$e = p.e).stopPropagation) === null || _p$e$stopPropagation === void 0 ? void 0 : _p$e$stopPropagation.call(_p$e);
    var changePrams = {
      e: p.e,
      trigger: "remove",
      index: p.index,
      file: p.file
    };
    if (props.isBatchUpload || !props.multiple) {
      var _props$onWaitingUploa3;
      toUploadFiles.value = [];
      (_props$onWaitingUploa3 = props.onWaitingUploadFilesChange) === null || _props$onWaitingUploa3 === void 0 ? void 0 : _props$onWaitingUploa3.call(props, {
        files: [],
        trigger: "remove"
      });
      setUploadValue([], changePrams);
    } else if (!props.autoUpload) {
      uploadValue.value.splice(p.index, 1);
      setUploadValue(_toConsumableArray(uploadValue.value), changePrams);
    } else {
      if (p.index < uploadValue.value.length) {
        uploadValue.value.splice(p.index, 1);
        setUploadValue(_toConsumableArray(uploadValue.value), changePrams);
      } else {
        var _props$onWaitingUploa4;
        toUploadFiles.value.splice(p.index - uploadValue.value.length, 1);
        toUploadFiles.value = _toConsumableArray(toUploadFiles.value);
        (_props$onWaitingUploa4 = props.onWaitingUploadFilesChange) === null || _props$onWaitingUploa4 === void 0 ? void 0 : _props$onWaitingUploa4.call(props, {
          files: _toConsumableArray(toUploadFiles.value),
          trigger: "remove"
        });
      }
    }
    (_props$onRemove = props.onRemove) === null || _props$onRemove === void 0 ? void 0 : _props$onRemove.call(props, p);
  }
  var triggerUpload = function triggerUpload(e) {
    var _e$stopPropagation;
    if (disabled.value || !inputRef.value) return;
    e === null || e === void 0 || (_e$stopPropagation = e.stopPropagation) === null || _e$stopPropagation === void 0 ? void 0 : _e$stopPropagation.call(e);
    inputRef.value.click();
  };
  var cancelUpload = function cancelUpload(context) {
    var _xhrReq$value, _props$onCancelUpload;
    (_xhrReq$value = xhrReq.value) === null || _xhrReq$value === void 0 ? void 0 : _xhrReq$value.forEach(function (item) {
      var _item$xhrReq;
      (_item$xhrReq = item.xhrReq) === null || _item$xhrReq === void 0 ? void 0 : _item$xhrReq.abort();
    });
    uploading.value = false;
    if (autoUpload.value) {
      toUploadFiles.value = toUploadFiles.value.map(function (item) {
        return _objectSpread(_objectSpread({}, item), {}, {
          status: "waiting"
        });
      });
    } else {
      setUploadValue(uploadValue.value.map(function (item) {
        if (item.status !== "success") {
          return _objectSpread(_objectSpread({}, item), {}, {
            status: "waiting"
          });
        }
        return item;
      }), {
        trigger: "abort"
      });
    }
    if (context !== null && context !== void 0 && context.file && !autoUpload.value) {
      onInnerRemove === null || onInnerRemove === void 0 ? void 0 : onInnerRemove({
        file: context.file,
        e: context.e,
        index: 0
      });
    }
    (_props$onCancelUpload = props.onCancelUpload) === null || _props$onCancelUpload === void 0 ? void 0 : _props$onCancelUpload.call(props);
  };
  return {
    t: t,
    locale: locale,
    classPrefix: classPrefix,
    triggerUploadText: triggerUploadText,
    toUploadFiles: toUploadFiles,
    uploadValue: uploadValue,
    displayFiles: displayFiles,
    sizeOverLimitMessage: sizeOverLimitMessage,
    uploading: uploading,
    tipsClasses: tipsClasses,
    errorClasses: errorClasses,
    placeholderClass: placeholderClass,
    inputRef: inputRef,
    disabled: disabled,
    xhrReq: xhrReq,
    uploadFilePercent: uploadFilePercent,
    uploadFiles: uploadFiles,
    onFileChange: onFileChange,
    onNormalFileChange: onNormalFileChange,
    onDragFileChange: onDragFileChange,
    onPasteFileChange: onPasteFileChange,
    onInnerRemove: onInnerRemove,
    triggerUpload: triggerUpload,
    cancelUpload: cancelUpload
  };
}

export { useUpload as default };
//# sourceMappingURL=useUpload.js.map