@progress/kendo-vue-upload 3.7.4-dev.202212300853 → 3.7.4-dev.202301091431

package/dist/esm/ExternalDropZone.js

@@ -7,6 +7,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 import { classNames, getListeners, getTabIndex, getTemplate, Icon, setRef, templateRendering, validatePackage } from '@progress/kendo-vue-common';
 import { dropZoneHint, dropZoneNote, messages } from './messages/main.js';
+import { uploadIcon } from '@progress/kendo-svg-icons';
 import { packageMetadata } from './package-metadata.js';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 /**
@@ -147,14 +148,16 @@ var ExternalDropZoneVue2 = {
     }, [h(Icon, {
       name: 'upload',
       attrs: this.v3 ? undefined : {
-        name: 'upload'
-      }
+        name: 'upload',
+        icon: uploadIcon
+      },
+      icon: uploadIcon
     }), h("span", {
       "class": 'k-dropzone-hint'
     }, [hintElement]), h("span", {
       "class": 'k-dropzone-note'
     }, [noteElement])]), h("div", {
-      "class": 'k-widget k-upload'
+      "class": 'k-upload'
     })]);
   }
 };

package/dist/esm/UploadAddButton.js

@@ -5,10 +5,11 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { classNames, setRef } from '@progress/kendo-vue-common';
+import { classNames, guid, setRef } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, select } from './messages/main.js';
 import { UploadInput } from './UploadInput.js';
+import { Button } from '@progress/kendo-vue-buttons';
 /**
  * @hidden
  */
@@ -48,6 +49,9 @@ var UploadAddButtonVue2 = {
       kendoLocalizationService: kendoLocalizationService
     };
   },
+  created: function created() {
+    this.uploadInputId = guid();
+  },
   mounted: function mounted() {
     this.element = this.v3 ? this.elementRef : this.$refs.element;
     this.uploadInput = this.v3 ? this.uploadInputRef : this.$refs.uploadInput;
@@ -104,30 +108,49 @@ var UploadAddButtonVue2 = {
       accept = _a.accept;
     var localizationService = provideLocalizationService(this);
     var selectMessage = localizationService.toLanguageString(select, messages[select]);
-    var buttonClassName = classNames('k-button', 'k-button-md', 'k-button-solid', 'k-button-solid-base', 'k-rounded-md', 'k-upload-button', navigationIndex === addButtonIndex ? 'k-focus' : '');
+    var buttonClassName = classNames('k-upload-button', navigationIndex === addButtonIndex ? 'k-focus' : '');
     return h("div", {
+      "class": "k-upload-button-wrap"
+    }, [h("label", {
+      "for": this.uploadInputId,
+      attrs: this.v3 ? undefined : {
+        "for": this.uploadInputId
+      }
+    }, [
+    // @ts-ignore  function children
+    h(Button, {
       id: id,
       attrs: this.v3 ? undefined : {
         id: id,
+        role: 'button',
+        disabled: disabled,
+        ariaLabel: selectMessage,
         tabindex: tabIndex
       },
       ref: setRef(this, 'element'),
+      role: 'button',
+      disabled: disabled,
+      ariaLabel: selectMessage,
       "class": buttonClassName,
       tabindex: tabIndex,
       onClick: this.onClick,
       on: this.v3 ? undefined : {
         "click": this.onClick
       }
-    }, [
+    }, this.v3 ? function () {
+      return [selectMessage];
+    } : [selectMessage])]),
     // @ts-ignore  function children
     h(UploadInput, {
-      async: async,
+      id: this.uploadInputId,
       attrs: this.v3 ? undefined : {
+        id: this.uploadInputId,
         async: async,
         multiple: multiple,
         disabled: disabled,
         accept: accept
       },
+      async: async,
       multiple: multiple,
       disabled: disabled,
       accept: accept,
@@ -140,7 +163,7 @@ var UploadAddButtonVue2 = {
       ref: this.v3 ? function (el) {
         _this.uploadInputRef = el;
       } : 'uploadInput'
-    }), h("span", [selectMessage])]);
+    })]);
   }
 };
 /**

package/dist/esm/UploadDropZone.js

@@ -103,8 +103,9 @@ var UploadDropZoneVue2 = {
     dropZoneClasses: function dropZoneClasses() {
       return {
         'k-dropzone': true,
-        'k-dropzone-active': this.currentDocumentActive,
-        'k-dropzone-hovered': this.currentElementActive
+        'k-upload-dropzone': true,
+        'k-active': this.currentDocumentActive,
+        'k-hover': this.currentElementActive
       };
     }
   },

package/dist/esm/UploadInput.d.ts

@@ -8,6 +8,7 @@ import { UploadAsyncProps } from './interfaces/UploadAsyncProps';
  * @hidden
  */
 export interface UploadInputProps {
+    id: String;
     async: UploadAsyncProps;
     multiple?: boolean;
     disabled?: boolean;

package/dist/esm/UploadInput.js

@@ -16,6 +16,7 @@ var UploadInputVue2 = {
   name: 'KendoVueUploadInput',
   props: {
     async: Object,
+    id: String,
     multiple: {
       type: Boolean,
       default: undefined
@@ -105,8 +106,9 @@ var UploadInputVue2 = {
     var selectLabel = localizationService.toLanguageString(select, messages[select]);
     return h("input", {
       ref: setRef(this, 'input'),
-      autocomplete: 'off',
+      id: this.id,
       attrs: this.v3 ? undefined : {
+        id: this.id,
         autocomplete: 'off',
         name: async.saveField,
         accept: accept,
@@ -119,6 +121,7 @@ var UploadInputVue2 = {
         "aria-labelledby": ariaLabelledBy,
         "aria-describedby": ariaDescribedBy
       },
+      autocomplete: 'off',
       name: async.saveField,
       accept: accept,
       type: 'file',

package/dist/esm/UploadListActionButton.d.ts

@@ -14,6 +14,7 @@ export interface UploadListActionButtonProps {
     status: UploadFileStatus;
     async: UploadAsyncProps;
     disabled: boolean;
+    files: any[];
 }
 /**
  * @hidden

package/dist/esm/UploadListActionButton.js

@@ -6,6 +6,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 import { classNames } from '@progress/kendo-vue-common';
+import { Button as KButton } from '@progress/kendo-vue-buttons';
 import { UploadFileStatus } from './interfaces/UploadFileStatus.js';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, cancel, retry, remove } from './messages/main.js';
@@ -19,7 +20,8 @@ var UploadListActionButtonVue2 = {
     uid: String,
     status: Number,
     async: Object,
-    disabled: Boolean
+    disabled: Boolean,
+    files: Array
   },
   // @ts-ignore
   emits: {
@@ -49,7 +51,7 @@ var UploadListActionButtonVue2 = {
       return localizationService.toLanguageString(retry, messages[retry]);
     },
     buttonClassNames: function buttonClassNames(type) {
-      return classNames('k-button k-button-icon k-flat k-upload-action', this.$props.disabled ? 'k-disabled' : '', this.actionFocused && type === 'action' || this.retryFocused && type === 'retry' ? 'k-focus' : '');
+      return classNames(this.actionFocused && type === 'action' || this.retryFocused && type === 'retry' ? 'k-focus' : '');
     },
     onRetryFocus: function onRetryFocus() {
       this.retryFocused = true;
@@ -101,24 +103,37 @@ var UploadListActionButtonVue2 = {
     var _a = this.$props,
       status = _a.status,
       progress = _a.progress;
-    var actionButtonClassNames = classNames('k-icon', status === UploadFileStatus.Uploading ? 'k-cancel k-i-deny' : '', status !== UploadFileStatus.Uploading ? 'k-delete k-i-x' : '');
     var isRetryVisible = status === UploadFileStatus.UploadFailed;
     var isProgressVisible = status === UploadFileStatus.Uploading;
     var isActionHidden = (status === UploadFileStatus.Uploaded || status === UploadFileStatus.Initial) && !this.$props.async.removeUrl;
     var localizationService = provideLocalizationService(this);
     var percent = '%';
-    return h("strong", {
-      "class": 'k-upload-status'
+    return h("div", {
+      "class": 'k-upload-actions'
     }, [isProgressVisible ? h("span", {
       "class": 'k-upload-pct'
-    }, [progress, percent]) : undefined, isRetryVisible ? h("button", {
+    }, [progress, percent]) : undefined, isRetryVisible ?
+    // @ts-ignore
+    h(KButton, {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        tabindex: -1
+        tabindex: -1,
+        disabled: this.disabled,
+        icon: 'arrow-rotate-cw-small'
+        //  svgIcon={isProgressVisible ? denyIcon : xIcon}
+        ,
+        iconClass: 'k-retry',
+        ariaLabel: this.retryButtonTitle(localizationService),
+        title: this.retryButtonTitle(localizationService)
       },
       tabindex: -1,
+      disabled: this.disabled,
       "class": this.buttonClassNames('retry'),
+      icon: 'arrow-rotate-cw-small',
+      iconClass: 'k-retry',
+      ariaLabel: this.retryButtonTitle(localizationService),
+      title: this.retryButtonTitle(localizationService),
       onFocus: this.onRetryFocus,
       on: this.v3 ? undefined : {
         "focus": this.onRetryFocus,
@@ -127,21 +142,24 @@ var UploadListActionButtonVue2 = {
       },
       onBlur: this.onRetryBlur,
       onClick: this.onRetryClick
-    }, [h("span", {
-      "aria-label": this.retryButtonTitle(localizationService),
-      attrs: this.v3 ? undefined : {
-        "aria-label": this.retryButtonTitle(localizationService),
-        title: this.retryButtonTitle(localizationService)
-      },
-      title: this.retryButtonTitle(localizationService),
-      "class": 'k-icon k-retry k-i-arrow-rotate-cw-small'
-    })]) : undefined, !isActionHidden ? h("button", {
+    }) : undefined, !isActionHidden ?
+    // @ts-ignore
+    h(KButton, {
       type: "button",
       attrs: this.v3 ? undefined : {
         type: "button",
-        tabindex: -1
+        fillMode: 'flat',
+        tabindex: -1,
+        disabled: this.disabled,
+        icon: isProgressVisible ? 'deny' : 'x'
+        // svgIcon={isProgressVisible ? denyIcon : xIcon}
+        ,
+        ariaLabel: this.actionButtonTitle(status, localizationService),
+        title: this.actionButtonTitle(status, localizationService)
       },
+      fillMode: 'flat',
       tabindex: -1,
+      disabled: this.disabled,
       "class": this.buttonClassNames('action'),
       onFocus: this.onActionFocus,
       on: this.v3 ? undefined : {
@@ -150,16 +168,11 @@ var UploadListActionButtonVue2 = {
         "click": this.onActionClick
       },
       onBlur: this.onActionBlur,
-      onClick: this.onActionClick
-    }, [h("span", {
-      "aria-label": this.actionButtonTitle(status, localizationService),
-      attrs: this.v3 ? undefined : {
-        "aria-label": this.actionButtonTitle(status, localizationService),
-        title: this.actionButtonTitle(status, localizationService)
-      },
-      title: this.actionButtonTitle(status, localizationService),
-      "class": actionButtonClassNames
-    })]) : undefined]);
+      onClick: this.onActionClick,
+      icon: isProgressVisible ? 'deny' : 'x',
+      ariaLabel: this.actionButtonTitle(status, localizationService),
+      title: this.actionButtonTitle(status, localizationService)
+    }) : undefined]);
   }
 };
 /**

package/dist/esm/UploadListGroup.js

@@ -74,7 +74,15 @@ var UploadListGroupVue2 = {
       list = _a.list;
     var firstFile = files[0];
     var isFileSuccess = firstFile.status === UploadFileStatus.Uploaded || firstFile.status === UploadFileStatus.Initial;
-    var liClassName = classNames('k-file', utils.filesHaveValidationErrors(files) ? 'k-file-invalid' : '', firstFile.status === UploadFileStatus.UploadFailed || firstFile.status === UploadFileStatus.RemoveFailed ? 'k-file-error' : '', firstFile.status === UploadFileStatus.Uploading ? 'k-file-progress' : '', isFileSuccess ? 'k-file-success' : '', navigationIndex === index ? 'k-focus' : '');
+    var validationErrors = utils.filesHaveValidationErrors(files);
+    var actionFailed = firstFile.status === UploadFileStatus.UploadFailed || firstFile.status === UploadFileStatus.RemoveFailed;
+    var liClassName = classNames('k-file', {
+      'k-file-invalid': validationErrors,
+      'k-file-error': actionFailed,
+      'k-file-progress': firstFile.status === UploadFileStatus.Uploading,
+      'k-file-success': isFileSuccess,
+      'k-focus': navigationIndex === index
+    });
     var itemComponent;
     var defaultItemRendering = files.length === 1 ?
     // @ts-ignore

package/dist/esm/UploadListMultiItem.js

@@ -5,11 +5,13 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { classNames } from '@progress/kendo-vue-common';
+import { classNames, Icon } from '@progress/kendo-vue-common';
 import utils from './utils/utils.js';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, total, files as filesM, statusUploadFailed, statusUploaded } from './messages/main.js';
 import { UploadListActionButton } from './UploadListActionButton.js';
+import { ProgressBar } from '@progress/kendo-vue-progressbars';
+import { copyIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -90,7 +92,7 @@ var UploadListMultiItemVue2 = {
       return files.map(function (file) {
         return h("span", {
           key: file.name,
-          "class": 'k-file-name-size-wrapper'
+          "class": 'k-file-info'
         }, [h("span", {
           "class": 'k-file-name',
           title: file.name,
@@ -98,7 +100,7 @@ var UploadListMultiItemVue2 = {
             title: file.name
           }
         }, [file.name]), utils.fileHasValidationErrors(file) ? h("span", {
-          "class": 'k-file-validation-message k-text-error'
+          "class": 'k-file-validation-message'
         }, [this.getFileValidationMessage(file)]) : h("span", {
           key: "".concat(file.name, "-size"),
           "class": 'k-file-size'
@@ -107,29 +109,31 @@ var UploadListMultiItemVue2 = {
     };
     return h("div", {
       "class": itemClassName
-    }, [h("div", {
-      "class": 'k-progressbar',
-      style: {
-        transition: 'opacity 1s ease-in-out',
-        opacity: showProgressBar ? 1 : 0
-      }
-    }, [h("span", {
-      "class": 'k-progress',
-      style: {
-        width: (progress || 0) + '%'
-      }
-    })]), h("span", {
-      "class": 'k-multiple-files-group-wrapper'
-    }, [h("span", {
-      "class": 'k-file-group k-icon k-i-copy'
+    }, [showProgressBar && h(ProgressBar, {
+      value: progress || 0,
+      attrs: this.v3 ? undefined : {
+        value: progress || 0,
+        labelVisible: false
+      },
+      labelVisible: false
+    }), h("span", {
+      "class": 'k-file-icon-wrapper'
+    }, [h(Icon, {
+      name: 'copy',
+      attrs: this.v3 ? undefined : {
+        name: 'copy',
+        icon: copyIcon
+      },
+      icon: copyIcon,
+      "class": 'k-file-icon'
     })]), h("span", {
       "class": "k-multiple-files-wrapper"
     }, [mapFiles.call(this), !isUploadFailed ? progress !== 100 ? h("span", {
-      "class": 'k-file-information'
+      "class": 'k-file-summary'
     }, ["".concat(totalMessage, ": ").concat(files.length, " ").concat(filesMessage, ", ").concat(utils.getTotalFilesSizeMessage(files))]) : h("span", {
-      "class": 'k-file-information k-text-success'
+      "class": 'k-file-summary k-text-success'
     }, ["".concat(files.length, " ").concat(successMessage)]) : h("span", {
-      "class": 'k-file-validation-message k-text-error'
+      "class": 'k-file-validation-message'
     }, ["".concat(files.length, " ").concat(uploadFailedMessage)])]),
     // @ts-ignore  function children
     h(UploadListActionButton, {

package/dist/esm/UploadListSingleItem.js

@@ -5,11 +5,13 @@ var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
-import { classNames } from '@progress/kendo-vue-common';
+import { classNames, Icon } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { ProgressBar } from '@progress/kendo-vue-progressbars';
 import { messages, statusUploaded, statusUploadFailed } from './messages/main.js';
 import utils from './utils/utils.js';
 import { UploadListActionButton } from './UploadListActionButton.js';
+import { fileAudioIcon, fileConfigIcon, fileDataIcon, fileIcon, fileImageIcon, filePdfIcon, filePresentationIcon, fileProgrammingIcon, fileTxtIcon, fileVideoIcon, fileZipIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -55,7 +57,7 @@ var UploadListSingleItemVue2 = {
       }
       return validationMessage;
     },
-    getFileExtensionIcon: function getFileExtensionIcon(file) {
+    getFileExtensionName: function getFileExtensionName(file) {
       switch (file.extension) {
         case '.png':
         case '.jpg':
@@ -63,41 +65,86 @@ var UploadListSingleItemVue2 = {
         case '.tiff':
         case '.bmp':
         case '.gif':
-          return 'k-i-file-image';
+          return 'file-image';
         case '.mp3':
         case '.mp4':
         case '.wav':
-          return 'k-i-file-audio';
+          return 'file-audio';
         case '.mkv':
         case '.webm':
         case '.flv':
         case '.gifv':
         case '.avi':
         case '.wmv':
-          return 'k-i-file-video';
+          return 'file-video';
         case '.txt':
-          return 'k-i-file-txt';
+          return 'file-txt';
         case '.pdf':
-          return 'k-i-file-pdf';
+          return 'file-pdf';
         case '.ppt':
         case '.pptx':
-          return 'k-i-file-presentation';
+          return 'file-presentation';
         case '.csv':
         case '.xls':
         case '.xlsx':
-          return 'k-i-file-data';
+          return 'file-data';
         case '.html':
         case '.css':
         case '.js':
         case '.ts':
-          return 'k-i-file-programming';
+          return 'file-programming';
         case '.exe':
-          return 'k-i-file-config';
+          return 'file-config';
         case '.zip':
         case '.rar':
-          return 'k-i-file-zip';
+          return 'file-zip';
         default:
-          return 'k-i-file';
+          return 'file';
+      }
+    },
+    getFileExtensionSVG: function getFileExtensionSVG(file) {
+      switch (file.extension) {
+        case '.png':
+        case '.jpg':
+        case '.jpeg':
+        case '.tiff':
+        case '.bmp':
+        case '.gif':
+          return fileImageIcon;
+        case '.mp3':
+        case '.mp4':
+        case '.wav':
+          return fileAudioIcon;
+        case '.mkv':
+        case '.webm':
+        case '.flv':
+        case '.gifv':
+        case '.avi':
+        case '.wmv':
+          return fileVideoIcon;
+        case '.txt':
+          return fileTxtIcon;
+        case '.pdf':
+          return filePdfIcon;
+        case '.ppt':
+        case '.pptx':
+          return filePresentationIcon;
+        case '.csv':
+        case '.xls':
+        case '.xlsx':
+          return fileDataIcon;
+        case '.html':
+        case '.css':
+        case '.js':
+        case '.ts':
+          return fileProgrammingIcon;
+        case '.exe':
+          return fileConfigIcon;
+        case '.zip':
+        case '.rar':
+          return fileZipIcon;
+        default:
+          return fileIcon;
       }
     }
   },
@@ -125,23 +172,23 @@ var UploadListSingleItemVue2 = {
     var showProgressBar = !isUploadValidationFailed && !isUploaded && !isUploadFailed;
     var renderValidationError = function renderValidationError(currentFile, isCurrentUploadFailed) {
       return h("span", {
-        "class": 'k-file-name-size-wrapper',
+        "class": 'k-file-info',
         key: '2'
       }, [h("span", {
-        "class": 'k-file-name k-file-name-invalid',
+        "class": 'k-file-name',
         title: currentFile.name,
         attrs: this.v3 ? undefined : {
           title: currentFile.name
         }
       }, [currentFile.name]), h("span", {
-        "class": 'k-file-validation-message k-text-error'
+        "class": 'k-file-validation-message'
       }, [this.getFileValidationMessage(currentFile, isCurrentUploadFailed)])]);
     };
     var renderFileDetails = function renderFileDetails(currentFile) {
       var localizationService = provideLocalizationService(this);
       var successMessage = localizationService.toLanguageString(statusUploaded, messages[statusUploaded]);
       return h("span", {
-        "class": 'k-file-name-size-wrapper',
+        "class": 'k-file-info',
         key: '2'
       }, [h("span", {
         "class": 'k-file-name',
@@ -152,27 +199,29 @@ var UploadListSingleItemVue2 = {
       }, [currentFile.name]), currentFile.progress !== 100 ? h("span", {
         "class": 'k-file-size'
       }, [utils.getTotalFilesSizeMessage([currentFile])]) : h("span", {
-        "class": 'k-file-validation-message k-text-success'
+        "class": 'k-file-validation-message'
       }, [successMessage])]);
     };
     return h("div", {
       "class": itemClassName
-    }, [h("div", {
-      "class": 'k-progressbar',
-      style: {
-        transition: 'opacity 1s ease-in-out',
-        opacity: showProgressBar ? 1 : 0
-      }
-    }, [h("span", {
-      "class": 'k-progress',
-      style: {
-        width: (file.progress || 0) + '%'
-      }
-    })]), h("span", {
-      "class": 'k-file-group-wrapper',
+    }, [showProgressBar && h(ProgressBar, {
+      value: file.progress || 0,
+      attrs: this.v3 ? undefined : {
+        value: file.progress || 0,
+        labelVisible: false
+      },
+      labelVisible: false
+    }), h("span", {
+      "class": 'k-file-icon-wrapper',
       key: '1'
-    }, [h("span", {
-      "class": 'k-file-group k-icon ' + this.getFileExtensionIcon(file)
+    }, [h(Icon, {
+      name: this.getFileExtensionName(file),
+      attrs: this.v3 ? undefined : {
+        name: this.getFileExtensionName(file),
+        icon: this.getFileExtensionSVG(file)
+      },
+      icon: this.getFileExtensionSVG(file),
+      "class": 'k-file-icon'
     }), h("span", {
       "class": 'k-file-state'
     })]), isUploadValidationFailed || isUploadFailed ? renderValidationError.call(this, file, isUploadFailed) : renderFileDetails.call(this, file),

package/dist/esm/UploadStatus.js

@@ -3,11 +3,11 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-var ref = allVue.ref;
 var inject = allVue.inject;
-import { classNames } from '@progress/kendo-vue-common';
+import { classNames, Icon } from '@progress/kendo-vue-common';
 import { provideLocalizationService } from '@progress/kendo-vue-intl';
 import { messages, headerStatusUploading, headerStatusUploaded } from './messages/main.js';
+import { checkIcon, exclamationCircleIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -37,7 +37,6 @@ var UploadStatusVue2 = {
       isUploading = _a.isUploading,
       isUploaded = _a.isUploaded,
       isUploadFailed = _a.isUploadFailed;
-    var statusClassName = classNames(!isUploading && !isUploadFailed && isUploaded ? 'k-i-checkmark' : '', !isUploading && isUploadFailed ? 'k-i-exception' : '', isUploading ? 'k-i-loading' : '', 'k-icon');
     var statusText = '';
     var localizationService = provideLocalizationService(this);
     if (isUploading) {
@@ -46,9 +45,16 @@ var UploadStatusVue2 = {
       statusText = localizationService.toLanguageString(headerStatusUploaded, messages[headerStatusUploaded]);
     }
     return h("div", {
-      "class": classNames('k-upload-status', 'k-upload-status-total')
-    }, [h("span", {
-      "class": statusClassName
+      "class": classNames('k-upload-status')
+    }, [isUploading ? h("span", {
+      "class": 'k-icon k-i-loading'
+    }) : h(Icon, {
+      name: isUploadFailed ? 'exclamation-circle' : isUploaded ? 'check' : '',
+      attrs: this.v3 ? undefined : {
+        name: isUploadFailed ? 'exclamation-circle' : isUploaded ? 'check' : '',
+        icon: isUploadFailed ? exclamationCircleIcon : isUploaded ? checkIcon : undefined
+      },
+      icon: isUploadFailed ? exclamationCircleIcon : isUploaded ? checkIcon : undefined
     }), statusText]);
   }
 };

package/dist/esm/UploadUI.js

@@ -157,7 +157,7 @@ var UploadUIVue2 = {
       ariaLabelledBy = _a.ariaLabelledBy,
       ariaDescribedBy = _a.ariaDescribedBy,
       async = _a.async;
-    var className = classNames('k-widget', 'k-upload', this.$props.className, disabled ? 'k-disabled' : '');
+    var className = classNames('k-upload', 'k-upload-async', this.$props.className, disabled ? 'k-disabled' : '');
     return h("div", {
       ref: setRef(this, 'container'),
       "class": className,

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-upload',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1672390325,
+    publishDate: 1673274481,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };