@rs-pk/asset-management 1.0.30 → 1.0.32

package/bundles/rs-pk-asset-management.umd.js

@@ -1649,6 +1649,7 @@
             this._api = _api;
             this.files = [];
             this.fileNames = [];
+            this.uploadErrors = new Map();
             this.supportedSize = 10 * 1024 * 1024; // 10MB
             // 10MB
             this.documentExtension = ['.pdf', '.csv'];
@@ -1751,9 +1752,25 @@
          * @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 {?}
@@ -1765,21 +1782,11 @@
         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);
         };
@@ -1803,6 +1810,8 @@
         /** @type {?} */
         UploadAssetsService.prototype.fileNames;
         /** @type {?} */
+        UploadAssetsService.prototype.uploadErrors;
+        /** @type {?} */
         UploadAssetsService.prototype.supportedSize;
         /** @type {?} */
         UploadAssetsService.prototype.documentExtension;
@@ -2608,6 +2617,16 @@
         function () {
             this.initDataFile();
         };
+        Object.defineProperty(FileItemComponent.prototype, "uploadErrors", {
+            get: /**
+             * @return {?}
+             */
+            function () {
+                return this.uploadAssetService.uploadErrors.get(this.file);
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @private
          * @return {?}
@@ -2730,8 +2749,8 @@
         FileItemComponent.decorators = [
             { type: core.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 */
@@ -3452,6 +3471,9 @@
             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 rxjs.Subject();
             if (this.data.fileType) {
                 this.uploadAssetsService.supportedTypes =
@@ -3479,6 +3501,7 @@
              */
             function (error) {
                 _this.disabled = error;
+                _this.clearErrors();
                 _this.changeDetectorRef.detectChanges();
             }));
         };
@@ -3492,6 +3515,7 @@
          */
         function (hasError) {
             this.disabled = hasError;
+            this.clearErrors();
         };
         /**
          * @return {?}
@@ -3502,6 +3526,8 @@
         function () {
             var _this = this;
             this.isLoading = true;
+            this.clearErrors();
+            this.dialogRef.disableClose = true;
             this.uploadAssetsService
                 .uploadMultipleAssets(this.data.currentAssetId)
                 .pipe(operators.takeUntil(this.destroy$))
@@ -3513,8 +3539,129 @@
                 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 {?}
@@ -3533,15 +3680,16 @@
          * @return {?}
          */
         function () {
+            this.isDestroyed = true;
             this.destroy$.next(true);
             this.destroy$.complete();
         };
         UploadDialogComponent.decorators = [
             { type: core.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 */
@@ -3558,6 +3706,18 @@
         UploadDialogComponent.prototype.isLoading;
         /** @type {?} */
         UploadDialogComponent.prototype.disabled;
+        /** @type {?} */
+        UploadDialogComponent.prototype.errorMessages;
+        /**
+         * @type {?}
+         * @private
+         */
+        UploadDialogComponent.prototype.defaultErrorMessage;
+        /**
+         * @type {?}
+         * @private
+         */
+        UploadDialogComponent.prototype.isDestroyed;
         /**
          * @type {?}
          * @private
@@ -3844,6 +4004,7 @@
             this.hasAccessPermission = true;
             this.hasArchivePermission = true;
             this.backgroundProcessingNum = BackgroudProcessingStatus;
+            this.processingCheckDelay = 5000;
             this.unsubscribe$ = new rxjs.Subject();
             this.selectedAssets = [];
         }
@@ -3865,17 +4026,8 @@
          * @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;
@@ -4028,15 +4180,8 @@
              * @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 () {
@@ -4048,29 +4193,92 @@
         };
         /**
          * @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 {?}
@@ -4079,6 +4287,7 @@
          * @return {?}
          */
         function () {
+            this.stopProcessingCheck();
             this.unsubscribe$.next();
             this.unsubscribe$.complete();
         };
@@ -4119,6 +4328,21 @@
         AssetListComponent.prototype.assets;
         /** @type {?} */
         AssetListComponent.prototype.backgroundProcessingNum;
+        /**
+         * @type {?}
+         * @private
+         */
+        AssetListComponent.prototype.processingCheckDelay;
+        /**
+         * @type {?}
+         * @private
+         */
+        AssetListComponent.prototype.processingCheckTimer;
+        /**
+         * @type {?}
+         * @private
+         */
+        AssetListComponent.prototype.processingCheckRequest;
         /**
          * @type {?}
          * @private