@progress/kendo-vue-upload 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/Upload.js

@@ -0,0 +1,787 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var ref = allVue.ref;
+import { getListeners, getTabIndex, templateRendering, validatePackage } from '@progress/kendo-vue-common';
+import { UploadFileStatus } from './interfaces/UploadFileStatus.js';
+import { UploadNavigation } from './UploadNavigation.js';
+import axios from 'axios';
+import utils from './utils/utils.js';
+import stateUtils from './utils/stateUtils.js';
+import connectionUtils from './utils/connectionUtils.js';
+import validationUtils from './utils/validationUtils.js';
+import { packageMetadata } from './package-metadata.js';
+/**
+ * @hidden
+ */
+
+var UploadVue2 = {
+  name: 'KendoVueUpload',
+  props: {
+    autoUpload: {
+      type: Boolean,
+      default: true
+    },
+    batch: {
+      type: Boolean,
+      default: false
+    },
+    withCredentials: {
+      type: Boolean,
+      default: true
+    },
+    saveField: {
+      type: String,
+      default: function _default() {
+        return 'files';
+      }
+    },
+    saveHeaders: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return {};
+      }
+    },
+    saveMethod: {
+      type: String,
+      default: function _default() {
+        return 'POST';
+      }
+    },
+    saveUrl: {
+      type: [String, Function],
+      default: function _default() {
+        return '';
+      }
+    },
+    responseType: {
+      type: String,
+      default: function _default() {
+        return 'json';
+      }
+    },
+    removeField: {
+      type: String,
+      default: function _default() {
+        return 'fileNames';
+      }
+    },
+    removeHeaders: {
+      type: [String, Function, Object],
+      default: function _default() {
+        return {};
+      }
+    },
+    removeMethod: {
+      type: String,
+      default: function _default() {
+        return 'POST';
+      }
+    },
+    removeUrl: {
+      type: [String, Function],
+      default: function _default() {
+        return '';
+      }
+    },
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showFileList: {
+      type: Boolean,
+      default: true
+    },
+    showActionButtons: {
+      type: Boolean,
+      default: true
+    },
+    actionsLayout: {
+      type: String,
+      default: function _default() {
+        return 'end';
+      }
+    },
+    tabIndex: Number,
+    accept: String,
+    list: [String, Function, Object],
+    restrictions: {
+      type: Object,
+      default: function _default() {
+        return {
+          allowedExtensions: [],
+          maxFileSize: 0,
+          minFileSize: 0
+        };
+      }
+    },
+    files: Array,
+    defaultFiles: Array
+  },
+  // @ts-ignore
+  emits: {
+    'add': null,
+    'beforeremove': null,
+    'beforeupload': null,
+    'cancel': null,
+    'statuschange': null,
+    'progress': null,
+    'remove': null
+  },
+  created: function created() {
+    this._httpSubscriptions = {};
+    validatePackage(packageMetadata);
+
+    if (this.$props.defaultFiles) {
+      this.currentFiles = this.$props.defaultFiles;
+    }
+  },
+  data: function data() {
+    return {
+      currentFiles: []
+    };
+  },
+  computed: {
+    computedAsync: function computedAsync() {
+      var _a = this.$props,
+          autoUpload = _a.autoUpload,
+          batch = _a.batch,
+          removeField = _a.removeField,
+          removeHeaders = _a.removeHeaders,
+          removeMethod = _a.removeMethod,
+          removeUrl = _a.removeUrl,
+          responseType = _a.responseType,
+          saveField = _a.saveField,
+          saveHeaders = _a.saveHeaders,
+          saveMethod = _a.saveMethod,
+          saveUrl = _a.saveUrl,
+          withCredentials = _a.withCredentials;
+      return {
+        autoUpload: autoUpload,
+        batch: batch,
+        removeField: removeField,
+        removeHeaders: removeHeaders,
+        removeMethod: removeMethod,
+        removeUrl: removeUrl,
+        responseType: responseType,
+        saveField: saveField,
+        saveHeaders: saveHeaders,
+        saveMethod: saveMethod,
+        saveUrl: saveUrl,
+        withCredentials: withCredentials
+      };
+    },
+    computedFiles: function computedFiles() {
+      var files = this.isControlled ? this.$props.files : this.currentFiles;
+      return files || [];
+    },
+    isControlled: function isControlled() {
+      return !this.$props.defaultFiles;
+    },
+    isCustomSave: function isCustomSave() {
+      return this.$props.saveUrl && typeof this.$props.saveUrl === 'function';
+    },
+    isCustomRemove: function isCustomRemove() {
+      return this.$props.removeUrl && typeof this.$props.removeUrl === 'function';
+    },
+    fileStateCopy: function fileStateCopy() {
+      return stateUtils.copyState(this.computedFiles);
+    },
+    actionElement: function actionElement() {
+      if (this._uploadNavigation) {
+        return this._uploadNavigation.actionElement;
+      }
+    }
+  },
+  mounted: function mounted() {
+    this._uploadNavigation = this.v3 ? this.uploadNavigationRef : this.$refs.uploadNavigation;
+  },
+  methods: {
+    focus: function focus() {
+      if (this._uploadNavigation) {
+        this._uploadNavigation.focus();
+      }
+    },
+    uploadFiles: function uploadFiles(filesForUpload) {
+      var _this = this;
+
+      var async = this.computedAsync;
+      stateUtils.setFilesStatus(filesForUpload, UploadFileStatus.Uploading);
+      stateUtils.groupForEach(filesForUpload, function (currentFiles, uid) {
+        var headers = connectionUtils.cloneRequestHeaders(async.saveHeaders || {});
+        var additionalData = {};
+        var eventData = {
+          target: _this,
+          files: currentFiles,
+          headers: headers,
+          additionalData: additionalData
+        };
+
+        _this.$emit('beforeupload', eventData);
+
+        var requestOptions = connectionUtils.populateRequestOptions(eventData.headers, _this.computedAsync);
+        var formData = connectionUtils.populateUploadFormData(currentFiles, async.saveField, eventData.additionalData);
+
+        if (_this.isCustomSave) {
+          _this.$props.saveUrl(currentFiles, {
+            formData: formData,
+            requestOptions: requestOptions
+          }, _this.onUploadProgress).then(function (event) {
+            return _this.onUploadSuccess(event.uid);
+          }).catch(function (event) {
+            return _this.onUploadError(event.uid);
+          });
+        } else {
+          var cancelTokenSource = axios.CancelToken.source();
+          _this._httpSubscriptions[uid] = cancelTokenSource;
+          axios(__assign(__assign({
+            method: async.saveMethod,
+            url: async.saveUrl,
+            data: formData,
+            cancelToken: cancelTokenSource.token
+          }, requestOptions), {
+            onUploadProgress: function onUploadProgress(event) {
+              return _this.onUploadProgress(uid, event);
+            }
+          })).then(function (event) {
+            return _this.onUploadSuccess(uid, event);
+          }).catch(function (event) {
+            return _this.onUploadError(uid, event);
+          });
+        }
+      });
+    },
+    removeFiles: function removeFiles(filesForRemove) {
+      var _this = this;
+
+      var async = this.computedAsync;
+      stateUtils.groupForEach(filesForRemove, function (currentFiles, uid) {
+        var headers = connectionUtils.cloneRequestHeaders(async.removeHeaders || {});
+        var additionalData = {};
+        var eventData = {
+          target: _this,
+          files: currentFiles,
+          headers: headers,
+          additionalData: additionalData
+        };
+
+        _this.$emit('beforeremove', eventData);
+
+        var fileNames = currentFiles.map(function (file) {
+          return file.name;
+        });
+        var requestOptions = connectionUtils.populateRequestOptions(eventData.headers, _this.computedAsync);
+        var formData = connectionUtils.populateRemoveFormData(fileNames, async.removeField, eventData.additionalData);
+
+        if (_this.isCustomRemove) {
+          _this.$props.removeUrl(currentFiles, {
+            formData: formData,
+            requestOptions: requestOptions
+          }).then(function (event) {
+            return _this.onRemoveSuccess(event.uid);
+          }).catch(function (event) {
+            return _this.onRemoveError(event.uid);
+          });
+        } else {
+          axios(__assign({
+            method: async.removeMethod,
+            url: async.removeUrl,
+            data: formData
+          }, requestOptions)).then(function (event) {
+            return _this.onRemoveSuccess(uid, event);
+          }).catch(function (event) {
+            return _this.onRemoveError(uid, event);
+          });
+        }
+      });
+    },
+    onUpload: function onUpload() {
+      var _this = this;
+
+      var newState = this.fileStateCopy;
+      var groupedFiles = stateUtils.groupFilesByUid(newState);
+      var filesForUpload = stateUtils.filesForUpload(groupedFiles);
+      this.uploadFiles(filesForUpload);
+
+      var onStatusChangeEvent = function onStatusChangeEvent() {
+        var eventData = {
+          target: _this,
+          newState: newState,
+          affectedFiles: stateUtils.flatFileGroup(filesForUpload)
+        };
+
+        _this.$emit('statuschange', eventData);
+      };
+
+      if (this.isControlled) {
+        onStatusChangeEvent();
+      } else {
+        this.currentFiles = newState;
+        onStatusChangeEvent();
+      }
+    },
+    onAdd: function onAdd(files) {
+      var _this = this; // The problem when removing rawFile is that there is no reliable way of preserving it internally.
+      // For example, uid + filename - the filename can be changed at any moment.
+
+
+      var selectedFiles = utils.getAllFileInfo(files);
+      var newState;
+      selectedFiles = utils.assignGuidToFiles(selectedFiles, this.computedAsync.batch);
+      validationUtils.validateFiles(selectedFiles, this.$props.restrictions);
+
+      if (!this.$props.multiple) {
+        newState = [];
+      } else {
+        newState = this.fileStateCopy;
+      }
+
+      stateUtils.addMany(selectedFiles, newState);
+
+      if (this.computedAsync.autoUpload) {
+        var groupedFiles = stateUtils.groupFilesByUid(newState);
+        this.uploadFiles(stateUtils.filesForUpload(groupedFiles));
+      }
+
+      var onAddEvent = function onAddEvent() {
+        var eventData = {
+          target: _this,
+          newState: newState,
+          affectedFiles: selectedFiles
+        };
+
+        _this.$emit('add', eventData);
+      };
+
+      if (this.isControlled) {
+        onAddEvent();
+      } else {
+        this.currentFiles = newState;
+        onAddEvent();
+      }
+    },
+    onUploadProgress: function onUploadProgress(uid, event) {
+      var _this = this;
+
+      var percentComplete = Math.round(100 * event.loaded / event.total) || 0;
+      var newState = this.fileStateCopy;
+      var filesWithProgress = newState.filter(function (file) {
+        return file.uid === uid;
+      });
+
+      if (!filesWithProgress.length) {
+        return;
+      }
+
+      filesWithProgress.forEach(function (file) {
+        file.progress = percentComplete;
+      });
+
+      var onProgressEvent = function onProgressEvent() {
+        var eventData = {
+          target: _this,
+          newState: newState,
+          affectedFiles: filesWithProgress
+        };
+
+        _this.$emit('progress', eventData);
+      };
+
+      if (this.isControlled) {
+        onProgressEvent();
+      } else {
+        this.currentFiles = newState;
+        onProgressEvent();
+      }
+    },
+    onUploadSuccess: function onUploadSuccess(uid, event) {
+      var _this = this;
+
+      var newState = this.fileStateCopy;
+      var successFiles = newState.filter(function (file) {
+        return file.uid === uid;
+      });
+      successFiles.forEach(function (file) {
+        file.status = UploadFileStatus.Uploaded;
+      });
+      delete this._httpSubscriptions[uid];
+
+      var onStatusChangeEvent = function onStatusChangeEvent() {
+        var eventData = {
+          target: _this,
+          newState: newState,
+          affectedFiles: successFiles,
+          response: event ? connectionUtils.convertAxiosResponse(event) : undefined
+        };
+
+        _this.$emit('statuschange', eventData);
+      };
+
+      if (this.isControlled) {
+        onStatusChangeEvent();
+      } else {
+        this.currentFiles = newState;
+        onStatusChangeEvent();
+      }
+    },
+    onUploadError: function onUploadError(uid, event) {
+      var _this = this;
+
+      var newState = this.fileStateCopy;
+      var failedFiles = newState.filter(function (file) {
+        return file.uid === uid;
+      });
+      failedFiles.forEach(function (file) {
+        file.status = UploadFileStatus.UploadFailed;
+      });
+      delete this._httpSubscriptions[uid];
+
+      if (!failedFiles.length) {
+        return;
+      }
+
+      var onStatusChangeEvent = function onStatusChangeEvent() {
+        var eventData = {
+          target: _this,
+          newState: newState,
+          affectedFiles: failedFiles,
+          response: event ? connectionUtils.convertAxiosResponse(event) : undefined
+        };
+
+        _this.$emit('statuschange', eventData);
+      };
+
+      if (this.isControlled) {
+        onStatusChangeEvent();
+      } else {
+        this.currentFiles = newState;
+        onStatusChangeEvent();
+      }
+    },
+    onRemove: function onRemove(uid) {
+      var _a;
+
+      var _this = this;
+
+      var newState = this.fileStateCopy;
+      var filesForRemove = newState.filter(function (file) {
+        return file.uid === uid;
+      });
+      var filesToKeep = newState.filter(function (file) {
+        return file.uid !== uid;
+      });
+      var remoteRemoveStatuses = [UploadFileStatus.Uploaded, UploadFileStatus.Initial, UploadFileStatus.RemoveFailed];
+
+      if (filesForRemove[0] && remoteRemoveStatuses.indexOf(filesForRemove[0].status) > -1) {
+        var fileGroup = (_a = {}, _a[uid] = filesForRemove, _a);
+        stateUtils.setFilesStatus(fileGroup, UploadFileStatus.Removing);
+        this.removeFiles(fileGroup);
+
+        var onStatusChangeEvent = function onStatusChangeEvent() {
+          var eventData = {
+            target: _this,
+            newState: newState,
+            affectedFiles: filesForRemove
+          };
+
+          _this.$emit('statuschange', eventData);
+        };
+
+        if (this.isControlled) {
+          onStatusChangeEvent();
+        } else {
+          this.currentFiles = newState;
+          onStatusChangeEvent();
+        }
+      } else {
+        var onRemoveEvent = function onRemoveEvent() {
+          var eventData = {
+            target: _this,
+            newState: filesToKeep,
+            affectedFiles: filesForRemove
+          };
+
+          _this.$emit('remove', eventData);
+        };
+
+        if (this.isControlled) {
+          onRemoveEvent();
+        } else {
+          this.currentFiles = filesToKeep;
+          onRemoveEvent();
+        }
+      }
+    },
+    onRemoveSuccess: function onRemoveSuccess(uid, event) {
+      var _this = this;
+
+      var newState = this.fileStateCopy;
+      var filesForRemove = newState.filter(function (file) {
+        return file.uid === uid;
+      });
+      var filesToKeep = newState.filter(function (file) {
+        return file.uid !== uid;
+      });
+
+      var onRemoveEvent = function onRemoveEvent() {
+        var eventData = {
+          target: _this,
+          newState: filesToKeep,
+          affectedFiles: filesForRemove,
+          response: event ? connectionUtils.convertAxiosResponse(event) : undefined
+        };
+
+        _this.$emit('remove', eventData);
+      };
+
+      if (this.isControlled) {
+        onRemoveEvent();
+      } else {
+        this.currentFiles = filesToKeep;
+        onRemoveEvent();
+      }
+    },
+    onRemoveError: function onRemoveError(uid, event) {
+      var _this = this;
+
+      var newState = this.fileStateCopy;
+      var failedFiles = newState.filter(function (file) {
+        return file.uid === uid;
+      });
+      failedFiles.forEach(function (file) {
+        file.status = UploadFileStatus.RemoveFailed;
+      });
+
+      var onStatusChangeEvent = function onStatusChangeEvent() {
+        var eventData = {
+          target: _this,
+          newState: newState,
+          affectedFiles: failedFiles,
+          response: event ? connectionUtils.convertAxiosResponse(event) : undefined
+        };
+
+        _this.$emit('statuschange', eventData);
+      };
+
+      if (this.isControlled) {
+        onStatusChangeEvent();
+      } else {
+        this.currentFiles = newState;
+        onStatusChangeEvent();
+      }
+    },
+    onRetry: function onRetry(uid) {
+      var _this = this;
+
+      var newState = this.fileStateCopy;
+      var filesForRetry = stateUtils.groupFilesByUid(newState.filter(function (file) {
+        return file.uid === uid;
+      }));
+      stateUtils.setFilesStatus(filesForRetry, UploadFileStatus.Uploading);
+      this.uploadFiles(filesForRetry);
+
+      var onStatusChangeEvent = function onStatusChangeEvent() {
+        var eventData = {
+          target: _this,
+          newState: newState,
+          affectedFiles: stateUtils.flatFileGroup(filesForRetry)
+        };
+
+        _this.$emit('statuschange', eventData);
+      };
+
+      if (this.isControlled) {
+        onStatusChangeEvent();
+      } else {
+        this.currentFiles = newState;
+        onStatusChangeEvent();
+      }
+    },
+    onCancel: function onCancel(uid) {
+      var _this = this;
+
+      var newState = this.fileStateCopy;
+      var filesToKeep = newState.filter(function (file) {
+        return file.uid !== uid;
+      });
+      var filesForRemove = newState.filter(function (file) {
+        return file.uid === uid;
+      });
+
+      if (this._httpSubscriptions[uid]) {
+        this._httpSubscriptions[uid].cancel();
+
+        delete this._httpSubscriptions[uid];
+      }
+
+      var eventData = {
+        target: this,
+        uid: uid
+      };
+      this.$emit('cancel', eventData);
+
+      var onRemoveEvent = function onRemoveEvent() {
+        var remEventData = {
+          target: _this,
+          newState: filesToKeep,
+          affectedFiles: filesForRemove
+        };
+
+        _this.$emit('remove', remEventData);
+      };
+
+      if (this.isControlled) {
+        onRemoveEvent();
+      } else {
+        this.currentFiles = newState;
+        onRemoveEvent();
+      }
+    },
+    onClear: function onClear() {
+      var _this = this;
+
+      if (!this.computedFiles.length) {
+        return;
+      }
+
+      Object.keys(this._httpSubscriptions).forEach(function (key) {
+        _this._httpSubscriptions[key].cancel();
+      });
+      this._httpSubscriptions = {};
+
+      var onRemoveEvent = function onRemoveEvent() {
+        var eventData = {
+          target: _this,
+          newState: [],
+          affectedFiles: _this.fileStateCopy
+        };
+
+        _this.$emit('remove', eventData);
+      };
+
+      if (this.isControlled) {
+        onRemoveEvent();
+      } else {
+        this.currentFiles = [];
+        onRemoveEvent();
+      }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        showFileList = _a.showFileList,
+        autoUpload = _a.autoUpload,
+        showActionButtons = _a.showActionButtons,
+        actionsLayout = _a.actionsLayout,
+        tabIndex = _a.tabIndex,
+        disabled = _a.disabled,
+        batch = _a.batch,
+        withCredentials = _a.withCredentials,
+        saveField = _a.saveField,
+        saveHeaders = _a.saveHeaders,
+        saveMethod = _a.saveMethod,
+        saveUrl = _a.saveUrl,
+        responseType = _a.responseType,
+        removeField = _a.removeField,
+        removeHeaders = _a.removeHeaders,
+        removeMethod = _a.removeMethod,
+        removeUrl = _a.removeUrl,
+        multiple = _a.multiple,
+        accept = _a.accept,
+        restrictions = _a.restrictions,
+        files = _a.files,
+        defaultFiles = _a.defaultFiles;
+    var list = templateRendering.call(this, this.$props.list, getListeners.call(this));
+    var groupedFiles = stateUtils.groupFilesByUid(this.computedFiles);
+    var filesForUpload = stateUtils.filesForUpload(groupedFiles);
+    return (// @ts-ignore  function children
+      h(UploadNavigation, {
+        groupedFiles: groupedFiles,
+        attrs: this.v3 ? undefined : {
+          groupedFiles: groupedFiles,
+          className: this.$props.className,
+          showFileList: showFileList && !!Object.keys(groupedFiles).length,
+          showActionButtons: showActionButtons && !autoUpload && !!Object.keys(filesForUpload).length,
+          actionsLayout: actionsLayout,
+          disabled: disabled,
+          tabIndex: getTabIndex(tabIndex, disabled),
+          multiple: multiple,
+          accept: accept,
+          list: list,
+          restrictions: restrictions,
+          files: files,
+          defaultFiles: defaultFiles,
+          async: this.computedAsync
+        },
+        className: this.$props.className,
+        showFileList: showFileList && !!Object.keys(groupedFiles).length,
+        showActionButtons: showActionButtons && !autoUpload && !!Object.keys(filesForUpload).length,
+        actionsLayout: actionsLayout,
+        disabled: disabled,
+        onAdd: this.onAdd,
+        on: this.v3 ? undefined : {
+          "add": this.onAdd,
+          "remove": this.onRemove,
+          "clear": this.onClear,
+          "upload": this.onUpload,
+          "retry": this.onRetry,
+          "cancel": this.onCancel
+        },
+        onRemove: this.onRemove,
+        onClear: this.onClear,
+        onUpload: this.onUpload,
+        onRetry: this.onRetry,
+        onCancel: this.onCancel,
+        tabIndex: getTabIndex(tabIndex, disabled),
+        ref: this.v3 ? function (el) {
+          _this.uploadNavigationRef = el;
+        } : 'uploadNavigation',
+        multiple: multiple,
+        accept: accept,
+        list: list,
+        restrictions: restrictions,
+        files: files,
+        defaultFiles: defaultFiles,
+        async: this.computedAsync
+      })
+    );
+  }
+};
+/**
+ * @hidden
+ */
+
+var Upload = UploadVue2;
+export { Upload, UploadVue2 };