@rs-pk/asset-management 1.0.30 → 1.0.32

package/fesm5/rs-pk-asset-management.js

@@ -1448,6 +1448,7 @@ var UploadAssetsService = /** @class */ (function () {
         this._api = _api;
         this.files = [];
         this.fileNames = [];
+        this.uploadErrors = new Map();
         this.supportedSize = 10 * 1024 * 1024; // 10MB
         // 10MB
         this.documentExtension = ['.pdf', '.csv'];
@@ -1550,9 +1551,25 @@ var UploadAssetsService = /** @class */ (function () {
      * @return {?}
      */
     function (index) {
+        this.uploadErrors.delete(this.files[index]);
         this.files.splice(index, 1);
         this.fileNames.splice(index, 1);
     };
+    /**
+     * @param {?} index
+     * @return {?}
+     */
+    UploadAssetsService.prototype.getUploadName = /**
+     * @param {?} index
+     * @return {?}
+     */
+    function (index) {
+        /** @type {?} */
+        var nameSplit = this.files[index].name.split('.');
+        /** @type {?} */
+        var ext = "." + nameSplit.splice(nameSplit.length - 1, 1)[0];
+        return "" + this.fileNames[index].name + ext;
+    };
     /**
      * @param {?} parentAssetId
      * @return {?}
@@ -1564,21 +1581,11 @@ var UploadAssetsService = /** @class */ (function () {
     function (parentAssetId) {
         var files = this.files;
         /** @type {?} */
-        var fileNames = this.fileNames.map((/**
-         * @param {?} file
-         * @return {?}
-         */
-        function (file) { return file.name; }));
-        /** @type {?} */
         var formData = new FormData();
         formData.append('parentAssetId', parentAssetId);
         formData.append('companyId', '732DA8D2-04EC-4BE0-A168-63EE0DCF50D8');
         for (var i = 0; i < files.length; i++) {
-            /** @type {?} */
-            var nameSplit = files[i].name.split('.');
-            /** @type {?} */
-            var ext = "." + nameSplit.splice(nameSplit.length - 1, 1)[0];
-            formData.append('files', files[i], "" + fileNames[i] + ext);
+            formData.append('files', files[i], this.getUploadName(i));
         }
         return this._api.post(this.baseUrl + "/File/Upload", formData);
     };
@@ -1602,6 +1609,8 @@ if (false) {
     /** @type {?} */
     UploadAssetsService.prototype.fileNames;
     /** @type {?} */
+    UploadAssetsService.prototype.uploadErrors;
+    /** @type {?} */
     UploadAssetsService.prototype.supportedSize;
     /** @type {?} */
     UploadAssetsService.prototype.documentExtension;
@@ -2407,6 +2416,16 @@ var FileItemComponent = /** @class */ (function () {
     function () {
         this.initDataFile();
     };
+    Object.defineProperty(FileItemComponent.prototype, "uploadErrors", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this.uploadAssetService.uploadErrors.get(this.file);
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @private
      * @return {?}
@@ -2529,8 +2548,8 @@ var FileItemComponent = /** @class */ (function () {
     FileItemComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-file-item',
-                    template: "<div class=\"file-item__img\">\n  <ng-container\n    *ngIf=\"\n      file.type.indexOf('image') > -1 || documentExts.indexOf(dataFile.ext) > -1;\n      else defaultFile\n    \"\n  >\n    <img\n      [class.image]=\"file.type.indexOf('image') > -1\"\n      *ngIf=\"documentExts.indexOf(dataFile.ext) > -1 || dataFile.data\"\n      [src]=\"documentExts.indexOf(dataFile.ext) > -1 ? base64PNG[dataFile.ext] : dataFile.data\"\n    />\n  </ng-container>\n  <ng-template #defaultFile>\n    <mat-icon>attach_file</mat-icon>\n  </ng-template>\n</div>\n<div class=\"file-item__content\">\n  <input\n    class=\"file-item__content--name\"\n    matInput\n    placeholder=\"Enter file name\"\n    [value]=\"dataFile.name\"\n    required\n    (input)=\"onChange($event)\"\n  />\n  <div class=\"file-item__content--info\">\n    <div class=\"file-item__content--info__item\">\n      Extension: <span>{{ dataFile.ext }}</span>\n    </div>\n    <div class=\"file-item__content--info__item\">\n      Size: <span>{{ dataFile.size | fileSize }}</span>\n    </div>\n  </div>\n  <div *ngIf=\"dataFile.errors.ext\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['ext'] }}\n    {{ uploadAssetService.supportedTypes.join(', ') }}\n  </div>\n  <div *ngIf=\"dataFile.errors.size\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['size'] }}\n    {{ uploadAssetService.supportedSize | fileSize: 0 }}\n  </div>\n  <div *ngIf=\"dataFile.errors.maxLength\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['maxLength'] }}\n  </div>\n</div>\n<div class=\"file-item__action\">\n  <mat-icon (click)=\"onRemove()\">delete_outline</mat-icon>\n</div>\n",
-                    styles: [":host::ng-deep{padding:10px 5%;display:flex;justify-content:space-between;align-items:center;background-color:#f9f9f9;border-radius:10px}:host::ng-deep .file-item__img{display:flex;justify-content:center;align-items:center;width:250px;height:150px;border-radius:10px}:host::ng-deep .file-item__img img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}:host::ng-deep .file-item__img img.image{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/ivFPFOf+EjvxzjbBgdv+PeDp+OfxzSt4q18AkageASB9ntu3OM+Vn8c5rsdG0fT9d06DVdUgN1f3XmefP5ksO/ypXhj/dwvHGu2ONF+VF3bQSM0AeYUV7IPCWgjgWRA/wCvi4P85SaKAPGm5Vh7H+VeyeERjQLEDoPP/WeQ/wAzRRQB0tFFFAH/2Q==)}:host::ng-deep .file-item__img mat-icon{font-size:100px;width:auto;height:auto}:host::ng-deep .file-item__content{flex:1;padding-left:5%;padding-right:5%}:host::ng-deep .file-item__content--name{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px}:host::ng-deep .file-item__content--info{margin-top:10px;display:flex}:host::ng-deep .file-item__content--info__item:not(:last-child){margin-right:50px}:host::ng-deep .file-item__content--info__item span{color:#000;text-transform:uppercase}:host::ng-deep .file-item__error{margin-top:10px;color:#f44336}:host::ng-deep .file-item__action{color:#f44336;cursor:pointer}"]
+                    template: "<div class=\"file-item__img\">\n  <ng-container\n    *ngIf=\"\n      file.type.indexOf('image') > -1 || documentExts.indexOf(dataFile.ext) > -1;\n      else defaultFile\n    \"\n  >\n    <img\n      [class.image]=\"file.type.indexOf('image') > -1\"\n      *ngIf=\"documentExts.indexOf(dataFile.ext) > -1 || dataFile.data\"\n      [src]=\"documentExts.indexOf(dataFile.ext) > -1 ? base64PNG[dataFile.ext] : dataFile.data\"\n    />\n  </ng-container>\n  <ng-template #defaultFile>\n    <mat-icon>attach_file</mat-icon>\n  </ng-template>\n</div>\n<div class=\"file-item__content\">\n  <input\n    class=\"file-item__content--name\"\n    matInput\n    placeholder=\"Enter file name\"\n    [value]=\"dataFile.name\"\n    required\n    (input)=\"onChange($event)\"\n  />\n  <div class=\"file-item__content--info\">\n    <div class=\"file-item__content--info__item\">\n      Extension: <span>{{ dataFile.ext }}</span>\n    </div>\n    <div class=\"file-item__content--info__item\">\n      Size: <span>{{ dataFile.size | fileSize }}</span>\n    </div>\n  </div>\n  <div *ngIf=\"dataFile.errors.ext\" class=\"file-item__error\">\n    <mat-icon class=\"file-item__error--icon\">error_outline</mat-icon>\n    <span>\n      {{ uploadAssetService.messageErrors['ext'] }}\n      {{ uploadAssetService.supportedTypes.join(', ') }}\n    </span>\n  </div>\n  <div *ngIf=\"dataFile.errors.size\" class=\"file-item__error\">\n    <mat-icon class=\"file-item__error--icon\">error_outline</mat-icon>\n    <span>\n      {{ uploadAssetService.messageErrors['size'] }}\n      {{ uploadAssetService.supportedSize | fileSize: 0 }}\n    </span>\n  </div>\n  <div *ngIf=\"dataFile.errors.maxLength\" class=\"file-item__error\">\n    <mat-icon class=\"file-item__error--icon\">error_outline</mat-icon>\n    <span>{{ uploadAssetService.messageErrors['maxLength'] }}</span>\n  </div>\n  <div *ngFor=\"let message of uploadErrors\" class=\"file-item__error\" role=\"alert\">\n    <mat-icon class=\"file-item__error--icon\">error_outline</mat-icon>\n    <span>{{ message }}</span>\n  </div>\n</div>\n<div class=\"file-item__action\">\n  <mat-icon (click)=\"onRemove()\">delete_outline</mat-icon>\n</div>\n",
+                    styles: [":host::ng-deep{padding:10px 5%;display:flex;justify-content:space-between;align-items:center;background-color:#f9f9f9;border-radius:10px}:host::ng-deep .file-item__img{display:flex;justify-content:center;align-items:center;width:250px;height:150px;border-radius:10px}:host::ng-deep .file-item__img img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}:host::ng-deep .file-item__img img.image{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/ivFPFOf+EjvxzjbBgdv+PeDp+OfxzSt4q18AkageASB9ntu3OM+Vn8c5rsdG0fT9d06DVdUgN1f3XmefP5ksO/ypXhj/dwvHGu2ONF+VF3bQSM0AeYUV7IPCWgjgWRA/wCvi4P85SaKAPGm5Vh7H+VeyeERjQLEDoPP/WeQ/wAzRRQB0tFFFAH/2Q==)}:host::ng-deep .file-item__img mat-icon{font-size:100px;width:auto;height:auto}:host::ng-deep .file-item__content{flex:1;padding-left:5%;padding-right:5%}:host::ng-deep .file-item__content--name{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px}:host::ng-deep .file-item__content--info{margin-top:10px;display:flex}:host::ng-deep .file-item__content--info__item:not(:last-child){margin-right:50px}:host::ng-deep .file-item__content--info__item span{color:#000;text-transform:uppercase}:host::ng-deep .file-item__error{display:flex;align-items:center;width:-moz-fit-content;width:fit-content;max-width:100%;margin-top:8px;padding:4px 10px;border-radius:6px;background-color:#fdecea;color:#d32f2f;font-size:13px;line-height:18px;word-break:break-word}:host::ng-deep .file-item__error--icon{flex-shrink:0;margin-right:6px;font-size:16px;width:16px;height:16px}:host::ng-deep .file-item__action{color:#f44336;cursor:pointer}"]
                 }] }
     ];
     /** @nocollapse */
@@ -3251,6 +3270,9 @@ var UploadDialogComponent = /** @class */ (function () {
         this.uploadAssetsService = uploadAssetsService;
         this.isLoading = false;
         this.disabled = true;
+        this.errorMessages = [];
+        this.defaultErrorMessage = 'Something went wrong while uploading. Please try again.';
+        this.isDestroyed = false;
         this.destroy$ = new Subject();
         if (this.data.fileType) {
             this.uploadAssetsService.supportedTypes =
@@ -3278,6 +3300,7 @@ var UploadDialogComponent = /** @class */ (function () {
          */
         function (error) {
             _this.disabled = error;
+            _this.clearErrors();
             _this.changeDetectorRef.detectChanges();
         }));
     };
@@ -3291,6 +3314,7 @@ var UploadDialogComponent = /** @class */ (function () {
      */
     function (hasError) {
         this.disabled = hasError;
+        this.clearErrors();
     };
     /**
      * @return {?}
@@ -3301,6 +3325,8 @@ var UploadDialogComponent = /** @class */ (function () {
     function () {
         var _this = this;
         this.isLoading = true;
+        this.clearErrors();
+        this.dialogRef.disableClose = true;
         this.uploadAssetsService
             .uploadMultipleAssets(this.data.currentAssetId)
             .pipe(takeUntil(this.destroy$))
@@ -3312,8 +3338,129 @@ var UploadDialogComponent = /** @class */ (function () {
             if (res) {
                 _this.closeDialog(true);
             }
+        }), (/**
+         * @param {?} err
+         * @return {?}
+         */
+        function (err) {
+            _this.setUploadErrors(_this.getErrorMessages(err));
+            _this.stopLoading();
+        }), (
+        // the request can complete without a truthy response (or be swallowed by an interceptor)
+        // the request can complete without a truthy response (or be swallowed by an interceptor)
+        /**
+         * @return {?}
+         */
+        function () { return _this.stopLoading(); }));
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    UploadDialogComponent.prototype.stopLoading = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        // takeUntil also completes the upload when the dialog is destroyed, its view can't be checked anymore
+        if (this.isDestroyed) {
+            return;
+        }
+        this.isLoading = false;
+        this.dialogRef.disableClose = false;
+        this.changeDetectorRef.detectChanges();
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    UploadDialogComponent.prototype.clearErrors = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        this.errorMessages = [];
+        this.uploadAssetsService.uploadErrors.clear();
+    };
+    // show each message on the file it mentions, the rest stay under the list
+    // show each message on the file it mentions, the rest stay under the list
+    /**
+     * @private
+     * @param {?} messages
+     * @return {?}
+     */
+    UploadDialogComponent.prototype.setUploadErrors = 
+    // show each message on the file it mentions, the rest stay under the list
+    /**
+     * @private
+     * @param {?} messages
+     * @return {?}
+     */
+    function (messages) {
+        var _this = this;
+        var _a = this.uploadAssetsService, files = _a.getFiles, uploadErrors = _a.uploadErrors;
+        /** @type {?} */
+        var uploadNames = files.map((/**
+         * @param {?} file
+         * @param {?} index
+         * @return {?}
+         */
+        function (file, index) { return _this.uploadAssetsService.getUploadName(index); }));
+        this.errorMessages = messages.filter((/**
+         * @param {?} message
+         * @return {?}
+         */
+        function (message) {
+            /** @type {?} */
+            var index = uploadNames.findIndex((/**
+             * @param {?} name
+             * @return {?}
+             */
+            function (name) { return message.indexOf(name) > -1; }));
+            if (index < 0 && files.length === 1) {
+                index = 0;
+            }
+            if (index < 0) {
+                return true;
+            }
+            uploadErrors.set(files[index], __spread((uploadErrors.get(files[index]) || []), [message]));
+            return false;
         }));
     };
+    /**
+     * @private
+     * @param {?} err
+     * @return {?}
+     */
+    UploadDialogComponent.prototype.getErrorMessages = /**
+     * @private
+     * @param {?} err
+     * @return {?}
+     */
+    function (err) {
+        // HttpErrorResponse keeps the API body in `error`, an interceptor may already unwrap it
+        /** @type {?} */
+        var body = err && err.error && typeof err.error === 'object' ? err.error : err || {};
+        /** @type {?} */
+        var messages = (body.Messages || [])
+            .map((/**
+         * @param {?} message
+         * @return {?}
+         */
+        function (message) { return (typeof message === 'string' ? message : message && message.Text); }))
+            .filter(Boolean);
+        if (!messages.length && body.ResponseMessage) {
+            messages.push(body.ResponseMessage);
+        }
+        return messages.length
+            ? messages.filter((/**
+             * @param {?} message
+             * @param {?} index
+             * @return {?}
+             */
+            function (message, index) { return messages.indexOf(message) === index; }))
+            : [this.defaultErrorMessage];
+    };
     /**
      * @param {?=} res
      * @return {?}
@@ -3332,15 +3479,16 @@ var UploadDialogComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.isDestroyed = true;
         this.destroy$.next(true);
         this.destroy$.complete();
     };
     UploadDialogComponent.decorators = [
         { type: Component, args: [{
                     selector: 'lib-upload-dialog',
-                    template: "<lib-modal heading=\"Add new assets\">\n  <ng-container content>\n    <lib-upload-file\n      *ngIf=\"!uploadAssetsService?.getFiles?.length\"\n      (revalidate)=\"onValidate($event)\"\n    ></lib-upload-file>\n    <lib-file-list\n      *ngIf=\"uploadAssetsService?.getFiles?.length\"\n      (revalidate)=\"onValidate($event)\"\n    ></lib-file-list>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close>Cancel</button>\n    <button\n      class=\"upload__action\"\n      [class.loading]=\"isLoading\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"uploadFiles()\"\n      [disabled]=\"disabled || isLoading\"\n    >\n      <ng-container *ngIf=\"isLoading\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Upload</span>\n    </button>\n  </ng-container>\n</lib-modal>\n",
+                    template: "<lib-modal heading=\"Add new assets\">\n  <ng-container content>\n    <lib-upload-file\n      *ngIf=\"!uploadAssetsService?.getFiles?.length\"\n      (revalidate)=\"onValidate($event)\"\n    ></lib-upload-file>\n    <lib-file-list\n      *ngIf=\"uploadAssetsService?.getFiles?.length\"\n      (revalidate)=\"onValidate($event)\"\n    ></lib-file-list>\n    <div *ngFor=\"let message of errorMessages\" class=\"upload__error\" role=\"alert\">\n      <mat-icon class=\"upload__error--icon\">error_outline</mat-icon>\n      <span>{{ message }}</span>\n    </div>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close [disabled]=\"isLoading\">Cancel</button>\n    <button\n      class=\"upload__action\"\n      [class.loading]=\"isLoading\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"uploadFiles()\"\n      [disabled]=\"disabled || isLoading\"\n    >\n      <ng-container *ngIf=\"isLoading\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Upload</span>\n    </button>\n  </ng-container>\n</lib-modal>\n",
                     providers: [UploadAssetsService],
-                    styles: [":host::ng-deep{display:block;width:1200px;max-width:100%;font-size:14px;line-height:16px;color:#979797;letter-spacing:.15px}:host::ng-deep .mat-dialog-title{position:relative;margin-bottom:0;padding-bottom:24px;color:#000}:host::ng-deep .mat-dialog-actions{justify-content:flex-end;padding:24px 0 0}:host::ng-deep .upload__action{min-width:100px}:host::ng-deep .upload__action.loading{padding:0 5px}:host::ng-deep .upload__action.loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}:host::ng-deep .upload__action.loading .mat-spinner{margin-right:10px}"]
+                    styles: [":host::ng-deep{display:block;width:1200px;max-width:100%;font-size:14px;line-height:16px;color:#979797;letter-spacing:.15px}:host::ng-deep .mat-dialog-title{position:relative;margin-bottom:0;padding-bottom:24px;color:#000}:host::ng-deep .mat-dialog-actions{justify-content:flex-end;padding:24px 0 0}:host::ng-deep .upload__error{display:flex;align-items:center;width:-moz-fit-content;width:fit-content;max-width:100%;margin-top:8px;padding:4px 10px;border-radius:6px;background-color:#fdecea;color:#d32f2f;font-size:13px;line-height:18px;word-break:break-word}:host::ng-deep .upload__error--icon{flex-shrink:0;margin-right:6px;font-size:16px;width:16px;height:16px}:host::ng-deep .upload__action{min-width:100px}:host::ng-deep .upload__action.loading{padding:0 5px}:host::ng-deep .upload__action.loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}:host::ng-deep .upload__action.loading .mat-spinner{margin-right:10px}"]
                 }] }
     ];
     /** @nocollapse */
@@ -3357,6 +3505,18 @@ if (false) {
     UploadDialogComponent.prototype.isLoading;
     /** @type {?} */
     UploadDialogComponent.prototype.disabled;
+    /** @type {?} */
+    UploadDialogComponent.prototype.errorMessages;
+    /**
+     * @type {?}
+     * @private
+     */
+    UploadDialogComponent.prototype.defaultErrorMessage;
+    /**
+     * @type {?}
+     * @private
+     */
+    UploadDialogComponent.prototype.isDestroyed;
     /**
      * @type {?}
      * @private
@@ -3643,6 +3803,7 @@ var AssetListComponent = /** @class */ (function () {
         this.hasAccessPermission = true;
         this.hasArchivePermission = true;
         this.backgroundProcessingNum = BackgroudProcessingStatus;
+        this.processingCheckDelay = 5000;
         this.unsubscribe$ = new Subject();
         this.selectedAssets = [];
     }
@@ -3664,17 +3825,8 @@ var AssetListComponent = /** @class */ (function () {
      * @return {?}
      */
     function (changes) {
-        var _this = this;
         if (changes.assets) {
-            // Check if asset is uploading
-            if (this.assets && this.assets.find((/**
-             * @param {?} x
-             * @return {?}
-             */
-            function (x) { return x.BackgroudProcessingStatus === _this.backgroundProcessingNum.InProcessing; }))) {
-                this._resetUploadingAssets();
-            }
-            ;
+            this.checkProcessingAssets();
             this.paginator.pageIndex = this.assetService.pageIndex;
             this.paginator.pageSize = this.assetService.pageSize;
             this.paginator.length = this.assetService.fileTotal;
@@ -3827,15 +3979,8 @@ var AssetListComponent = /** @class */ (function () {
          * @param {?} res
          * @return {?}
          */
-        function (res) {
-            /** @type {?} */
-            var pagination = res && res.Meta || {};
-            /** @type {?} */
-            var assets = res && res.Data && res.Data.Children || [];
-            /** @type {?} */
-            var totalFile = res && res.Data && res.Data.TotalFile || 0;
-            _this.assetService.setAssetList(assets, pagination, totalFile);
-        })).add((/**
+        function (res) { return _this.setAssetList(res); }))
+            .add((/**
          * @return {?}
          */
         function () {
@@ -3847,29 +3992,92 @@ var AssetListComponent = /** @class */ (function () {
     };
     /**
      * @private
+     * @param {?} res
      * @return {?}
      */
-    AssetListComponent.prototype._resetUploadingAssets = /**
+    AssetListComponent.prototype.setAssetList = /**
+     * @private
+     * @param {?} res
+     * @return {?}
+     */
+    function (res) {
+        /** @type {?} */
+        var pagination = res && res.Meta || {};
+        /** @type {?} */
+        var assets = res && res.Data && res.Data.Children || [];
+        /** @type {?} */
+        var totalFile = res && res.Data && res.Data.TotalFile || 0;
+        this.assetService.setAssetList(assets, pagination, totalFile);
+    };
+    // Called on every new asset list: while some files are still processed in the background,
+    // reload the list once after a delay. The reloaded list calls this again, until nothing is processing.
+    // Called on every new asset list: while some files are still processed in the background,
+    // reload the list once after a delay. The reloaded list calls this again, until nothing is processing.
+    /**
+     * @private
+     * @return {?}
+     */
+    AssetListComponent.prototype.checkProcessingAssets = 
+    // Called on every new asset list: while some files are still processed in the background,
+    // reload the list once after a delay. The reloaded list calls this again, until nothing is processing.
+    /**
      * @private
      * @return {?}
      */
     function () {
         var _this = this;
+        this.stopProcessingCheck();
         /** @type {?} */
-        var reload = setInterval((/**
+        var hasProcessingAssets = this.assets && this.assets.some((/**
+         * @param {?} asset
          * @return {?}
          */
-        function () {
-            _this.fetchChildrenAssets();
-            if (_this.assets.find((/**
-             * @param {?} x
+        function (asset) { return asset.BackgroudProcessingStatus === _this.backgroundProcessingNum.InProcessing; }));
+        if (hasProcessingAssets) {
+            this.processingCheckTimer = setTimeout((/**
              * @return {?}
              */
-            function (x) { return x.BackgroudProcessingStatus === _this.backgroundProcessingNum.Processed; }))) {
-                clearInterval(reload);
-            }
-            console.log('Upload Successfully!'); // interval will be cleared after completing this whole block
-        }), 5000);
+            function () { return _this.reloadProcessingAssets(); }), this.processingCheckDelay);
+        }
+    };
+    // Silent reload, without the global loading bar
+    // Silent reload, without the global loading bar
+    /**
+     * @private
+     * @return {?}
+     */
+    AssetListComponent.prototype.reloadProcessingAssets = 
+    // Silent reload, without the global loading bar
+    /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        var _this = this;
+        if (!this.currentFolderId) {
+            return;
+        }
+        this.processingCheckRequest = this.assetService
+            .getChildrenAssets({ assetId: this.currentFolderId })
+            .subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        function (res) { return _this.setAssetList(res); }));
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    AssetListComponent.prototype.stopProcessingCheck = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        clearTimeout(this.processingCheckTimer);
+        if (this.processingCheckRequest) {
+            this.processingCheckRequest.unsubscribe();
+        }
     };
     /**
      * @return {?}
@@ -3878,6 +4086,7 @@ var AssetListComponent = /** @class */ (function () {
      * @return {?}
      */
     function () {
+        this.stopProcessingCheck();
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     };
@@ -3918,6 +4127,21 @@ if (false) {
     AssetListComponent.prototype.assets;
     /** @type {?} */
     AssetListComponent.prototype.backgroundProcessingNum;
+    /**
+     * @type {?}
+     * @private
+     */
+    AssetListComponent.prototype.processingCheckDelay;
+    /**
+     * @type {?}
+     * @private
+     */
+    AssetListComponent.prototype.processingCheckTimer;
+    /**
+     * @type {?}
+     * @private
+     */
+    AssetListComponent.prototype.processingCheckRequest;
     /**
      * @type {?}
      * @private