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

package/dist/npm/UploadAddButton.js

@@ -15,6 +15,7 @@ var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var main_1 = require("./messages/main");
 var UploadInput_1 = require("./UploadInput");
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 /**
  * @hidden
  */
@@ -29,9 +30,7 @@ var UploadAddButtonVue2 = {
     multiple: Boolean,
     disabled: Boolean,
     accept: String,
-    id: String,
-    ariaLabelledBy: String,
-    ariaDescribedBy: String
+    id: String
   },
   inject: {
     kendoLocalizationService: {
@@ -56,6 +55,9 @@ var UploadAddButtonVue2 = {
       kendoLocalizationService: kendoLocalizationService
     };
   },
+  created: function created() {
+    this.uploadInputId = (0, kendo_vue_common_1.guid)();
+  },
   mounted: function mounted() {
     this.element = this.v3 ? this.elementRef : this.$refs.element;
     this.uploadInput = this.v3 ? this.uploadInputRef : this.$refs.uploadInput;
@@ -106,46 +108,55 @@ var UploadAddButtonVue2 = {
       addButtonIndex = _a.addButtonIndex,
       tabIndex = _a.tabIndex,
       id = _a.id,
-      ariaLabelledBy = _a.ariaLabelledBy,
-      ariaDescribedBy = _a.ariaDescribedBy,
       async = _a.async,
       multiple = _a.multiple,
       disabled = _a.disabled,
       accept = _a.accept;
     var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     var selectMessage = localizationService.toLanguageString(main_1.select, main_1.messages[main_1.select]);
-    var buttonClassName = (0, kendo_vue_common_1.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 = (0, kendo_vue_common_1.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(kendo_vue_buttons_1.Button, {
       id: id,
       attrs: this.v3 ? undefined : {
         id: id,
-        role: "button",
-        "aria-label": selectMessage,
-        "aria-labelledby": ariaLabelledBy,
-        "aria-describedby": ariaDescribedBy,
+        role: 'button',
+        disabled: disabled,
+        ariaLabel: selectMessage,
         tabindex: tabIndex
       },
       ref: (0, kendo_vue_common_1.setRef)(this, 'element'),
-      role: "button",
+      role: 'button',
+      disabled: disabled,
+      ariaLabel: selectMessage,
       "class": buttonClassName,
-      "aria-label": selectMessage,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
       tabindex: tabIndex,
       onClick: this.onClick,
       on: this.v3 ? undefined : {
         "click": this.onClick
       }
-    }, [
+    }, this.v3 ? function () {
+      return [selectMessage];
+    } : [selectMessage])]),
     // @ts-ignore  function children
     h(UploadInput_1.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,
@@ -158,7 +169,7 @@ var UploadAddButtonVue2 = {
       ref: this.v3 ? function (el) {
         _this.uploadInputRef = el;
       } : 'uploadInput'
-    }), h("span", [selectMessage])]);
+    })]);
   }
 };
 exports.UploadAddButtonVue2 = UploadAddButtonVue2;

package/dist/npm/UploadDropZone.js

@@ -109,8 +109,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/npm/UploadInput.d.ts

@@ -8,10 +8,14 @@ import { UploadAsyncProps } from './interfaces/UploadAsyncProps';
  * @hidden
  */
 export interface UploadInputProps {
+    id: String;
     async: UploadAsyncProps;
     multiple?: boolean;
     disabled?: boolean;
     accept?: string;
+    hasFiles?: boolean;
+    ariaLabelledBy?: string;
+    ariaDescribedBy?: string;
 }
 /**
  * @hidden

package/dist/npm/UploadInput.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.UploadInputVue2 = exports.UploadInput = void 0;
 // @ts-ignore
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var Vue = require("vue");
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
+var main_1 = require("./messages/main");
 var CHROME_REGEX = /(chrome)[ \/]([\w.]+)/i;
 var SAFARI_REGEX = /(webkit)[ \/]([\w.]+)/i;
 /**
@@ -20,6 +22,7 @@ var UploadInputVue2 = {
   name: 'KendoVueUploadInput',
   props: {
     async: Object,
+    id: String,
     multiple: {
       type: Boolean,
       default: undefined
@@ -31,6 +34,18 @@ var UploadInputVue2 = {
     accept: {
       type: String,
       default: undefined
+    },
+    hasFiles: {
+      type: Boolean,
+      default: false
+    },
+    ariaLabelledBy: {
+      type: String,
+      default: undefined
+    },
+    ariaDescribedBy: {
+      type: String,
+      default: undefined
     }
   },
   // @ts-ignore
@@ -38,6 +53,11 @@ var UploadInputVue2 = {
     'mousedown': null,
     'add': null
   },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
   mounted: function mounted() {
     this._input = this.v3 ? this.inputRef : this.$refs.input;
   },
@@ -82,19 +102,32 @@ var UploadInputVue2 = {
       multiple = _a.multiple,
       async = _a.async,
       disabled = _a.disabled,
-      accept = _a.accept;
+      accept = _a.accept,
+      hasFiles = _a.hasFiles,
+      ariaLabelledBy = _a.ariaLabelledBy,
+      ariaDescribedBy = _a.ariaDescribedBy;
+    var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    var message = hasFiles ? main_1.selectTitle : main_1.selectNoFilesTitle;
+    var selectMessage = localizationService.toLanguageString(message, main_1.messages[message]);
+    var selectLabel = localizationService.toLanguageString(main_1.select, main_1.messages[main_1.select]);
     return h("input", {
       ref: (0, kendo_vue_common_1.setRef)(this, 'input'),
-      autocomplete: 'off',
+      id: this.id,
       attrs: this.v3 ? undefined : {
+        id: this.id,
         autocomplete: 'off',
         name: async.saveField,
         accept: accept,
         type: 'file',
         tabindex: -1,
         multiple: multiple,
-        disabled: disabled
+        disabled: disabled,
+        title: selectMessage,
+        "aria-label": ariaLabelledBy !== undefined ? undefined : selectLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy
       },
+      autocomplete: 'off',
       name: async.saveField,
       accept: accept,
       type: 'file',
@@ -106,7 +139,11 @@ var UploadInputVue2 = {
         "change": this.onAdd,
         "mousedown": this.onMouseDown
       },
-      onMousedown: this.onMouseDown
+      onMousedown: this.onMouseDown,
+      title: selectMessage,
+      "aria-label": ariaLabelledBy !== undefined ? undefined : selectLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-describedby": ariaDescribedBy
     });
   }
 };

package/dist/npm/UploadListActionButton.d.ts

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

package/dist/npm/UploadListActionButton.js

@@ -12,6 +12,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
 var inject = allVue.inject;
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_vue_buttons_1 = require("@progress/kendo-vue-buttons");
 var UploadFileStatus_1 = require("./interfaces/UploadFileStatus");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var main_1 = require("./messages/main");
@@ -25,7 +26,8 @@ var UploadListActionButtonVue2 = {
     uid: String,
     status: Number,
     async: Object,
-    disabled: Boolean
+    disabled: Boolean,
+    files: Array
   },
   // @ts-ignore
   emits: {
@@ -55,7 +57,7 @@ var UploadListActionButtonVue2 = {
       return localizationService.toLanguageString(main_1.retry, main_1.messages[main_1.retry]);
     },
     buttonClassNames: function buttonClassNames(type) {
-      return (0, kendo_vue_common_1.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 (0, kendo_vue_common_1.classNames)(this.actionFocused && type === 'action' || this.retryFocused && type === 'retry' ? 'k-focus' : '');
     },
     onRetryFocus: function onRetryFocus() {
       this.retryFocused = true;
@@ -107,24 +109,37 @@ var UploadListActionButtonVue2 = {
     var _a = this.$props,
       status = _a.status,
       progress = _a.progress;
-    var actionButtonClassNames = (0, kendo_vue_common_1.classNames)('k-icon', status === UploadFileStatus_1.UploadFileStatus.Uploading ? 'k-cancel k-i-deny' : '', status !== UploadFileStatus_1.UploadFileStatus.Uploading ? 'k-delete k-i-x' : '');
     var isRetryVisible = status === UploadFileStatus_1.UploadFileStatus.UploadFailed;
     var isProgressVisible = status === UploadFileStatus_1.UploadFileStatus.Uploading;
     var isActionHidden = (status === UploadFileStatus_1.UploadFileStatus.Uploaded || status === UploadFileStatus_1.UploadFileStatus.Initial) && !this.$props.async.removeUrl;
     var localizationService = (0, kendo_vue_intl_1.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(kendo_vue_buttons_1.Button, {
       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,
@@ -133,21 +148,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(kendo_vue_buttons_1.Button, {
       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 : {
@@ -156,16 +174,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]);
   }
 };
 exports.UploadListActionButtonVue2 = UploadListActionButtonVue2;

package/dist/npm/UploadListGroup.js

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

package/dist/npm/UploadListMultiItem.js

@@ -16,6 +16,8 @@ var utils_1 = require("./utils/utils");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
 var main_1 = require("./messages/main");
 var UploadListActionButton_1 = require("./UploadListActionButton");
+var kendo_vue_progressbars_1 = require("@progress/kendo-vue-progressbars");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -96,7 +98,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,
@@ -104,7 +106,7 @@ var UploadListMultiItemVue2 = {
             title: file.name
           }
         }, [file.name]), utils_1.default.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'
@@ -113,29 +115,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(kendo_vue_progressbars_1.ProgressBar, {
+      value: progress || 0,
+      attrs: this.v3 ? undefined : {
+        value: progress || 0,
+        labelVisible: false
+      },
+      labelVisible: false
+    }), h("span", {
+      "class": 'k-file-icon-wrapper'
+    }, [h(kendo_vue_common_1.Icon, {
+      name: 'copy',
+      attrs: this.v3 ? undefined : {
+        name: 'copy',
+        icon: kendo_svg_icons_1.copyIcon
+      },
+      icon: kendo_svg_icons_1.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_1.default.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_1.UploadListActionButton, {

package/dist/npm/UploadListSingleItem.js

@@ -13,9 +13,11 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 var kendo_vue_common_1 = require("@progress/kendo-vue-common");
 var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var kendo_vue_progressbars_1 = require("@progress/kendo-vue-progressbars");
 var main_1 = require("./messages/main");
 var utils_1 = require("./utils/utils");
 var UploadListActionButton_1 = require("./UploadListActionButton");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -61,7 +63,7 @@ var UploadListSingleItemVue2 = {
       }
       return validationMessage;
     },
-    getFileExtensionIcon: function getFileExtensionIcon(file) {
+    getFileExtensionName: function getFileExtensionName(file) {
       switch (file.extension) {
         case '.png':
         case '.jpg':
@@ -69,41 +71,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 kendo_svg_icons_1.fileImageIcon;
+        case '.mp3':
+        case '.mp4':
+        case '.wav':
+          return kendo_svg_icons_1.fileAudioIcon;
+        case '.mkv':
+        case '.webm':
+        case '.flv':
+        case '.gifv':
+        case '.avi':
+        case '.wmv':
+          return kendo_svg_icons_1.fileVideoIcon;
+        case '.txt':
+          return kendo_svg_icons_1.fileTxtIcon;
+        case '.pdf':
+          return kendo_svg_icons_1.filePdfIcon;
+        case '.ppt':
+        case '.pptx':
+          return kendo_svg_icons_1.filePresentationIcon;
+        case '.csv':
+        case '.xls':
+        case '.xlsx':
+          return kendo_svg_icons_1.fileDataIcon;
+        case '.html':
+        case '.css':
+        case '.js':
+        case '.ts':
+          return kendo_svg_icons_1.fileProgrammingIcon;
+        case '.exe':
+          return kendo_svg_icons_1.fileConfigIcon;
+        case '.zip':
+        case '.rar':
+          return kendo_svg_icons_1.fileZipIcon;
+        default:
+          return kendo_svg_icons_1.fileIcon;
       }
     }
   },
@@ -131,23 +178,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 = (0, kendo_vue_intl_1.provideLocalizationService)(this);
       var successMessage = localizationService.toLanguageString(main_1.statusUploaded, main_1.messages[main_1.statusUploaded]);
       return h("span", {
-        "class": 'k-file-name-size-wrapper',
+        "class": 'k-file-info',
         key: '2'
       }, [h("span", {
         "class": 'k-file-name',
@@ -158,27 +205,29 @@ var UploadListSingleItemVue2 = {
       }, [currentFile.name]), currentFile.progress !== 100 ? h("span", {
         "class": 'k-file-size'
       }, [utils_1.default.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(kendo_vue_progressbars_1.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(kendo_vue_common_1.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),