@rs-pk/asset-management 1.0.29 → 1.0.31

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

@@ -1633,6 +1633,7 @@
             this._api = _api;
             this.files = [];
             this.fileNames = [];
+            this.uploadErrors = new Map();
             this.supportedSize = 10 * 1024 * 1024; // 10MB
             // 10MB
             this.documentExtension = ['.pdf', '.csv'];
@@ -1735,9 +1736,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 {?}
@@ -1749,21 +1766,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);
         };
@@ -1787,6 +1794,8 @@
         /** @type {?} */
         UploadAssetsService.prototype.fileNames;
         /** @type {?} */
+        UploadAssetsService.prototype.uploadErrors;
+        /** @type {?} */
         UploadAssetsService.prototype.supportedSize;
         /** @type {?} */
         UploadAssetsService.prototype.documentExtension;
@@ -2579,6 +2588,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 {?}
@@ -2701,8 +2720,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 */
@@ -3417,6 +3436,8 @@
             this.uploadAssetsService = uploadAssetsService;
             this.isLoading = false;
             this.disabled = true;
+            this.errorMessages = [];
+            this.defaultErrorMessage = 'Something went wrong while uploading. Please try again.';
             this.destroy$ = new rxjs.Subject();
             if (this.data.fileType) {
                 this.uploadAssetsService.supportedTypes =
@@ -3444,6 +3465,7 @@
              */
             function (error) {
                 _this.disabled = error;
+                _this.clearErrors();
                 _this.changeDetectorRef.detectChanges();
             }));
         };
@@ -3457,6 +3479,7 @@
          */
         function (hasError) {
             this.disabled = hasError;
+            this.clearErrors();
         };
         /**
          * @return {?}
@@ -3467,6 +3490,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$))
@@ -3478,8 +3503,125 @@
                 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 () {
+            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 {?}
@@ -3504,9 +3646,9 @@
         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 */
@@ -3523,6 +3665,13 @@
         UploadDialogComponent.prototype.isLoading;
         /** @type {?} */
         UploadDialogComponent.prototype.disabled;
+        /** @type {?} */
+        UploadDialogComponent.prototype.errorMessages;
+        /**
+         * @type {?}
+         * @private
+         */
+        UploadDialogComponent.prototype.defaultErrorMessage;
         /**
          * @type {?}
          * @private
@@ -3806,6 +3955,7 @@
             this.hasAccessPermission = true;
             this.hasArchivePermission = true;
             this.backgroundProcessingNum = BackgroudProcessingStatus;
+            this.processingCheckDelay = 5000;
             this.unsubscribe$ = new Subject.Subject();
             this.selectedAssets = [];
         }
@@ -3827,17 +3977,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;
@@ -3990,15 +4131,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 () {
@@ -4008,31 +4142,94 @@
                 });
             }));
         };
+        /**
+         * @private
+         * @param {?} res
+         * @return {?}
+         */
+        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._resetUploadingAssets = /**
+        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 {?}
@@ -4041,6 +4238,7 @@
          * @return {?}
          */
         function () {
+            this.stopProcessingCheck();
             this.unsubscribe$.next();
             this.unsubscribe$.complete();
         };
@@ -4081,6 +4279,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
@@ -6926,20 +7139,78 @@
      */
     /** @type {?} */
     var AdminConfig = {
-        locale: 'en-US',
-        timeZone: 'local',
+        locale: "en-US",
+        countryName: {
+            US: "United States",
+            CA: "Canada",
+        },
         format: {
-            date: 'MM/DD/YYYY',
-            dayMonth: 'MMM DD',
-            dateTime: 'MM/DD/YYYY HH:mm',
-            fullDateTime: 'MM/DD/YYYY HH:mm:ss',
-            dateTimeAM: 'MM/DD/YYYY hh:mm A',
-            apiDate: 'YYYY/MM/DD',
-            apiDateTime: 'YYYY-MM-DD[T]HH:mm:ssZ',
-            apiDateTimeNoZ: 'YYYY-MM-DD[T]HH:mm:ss',
-            apiDateMonthYear: 'MMM DD YYYY',
-            urlParam: 'YYYY-MM-DD',
+            date: "MM/DD/YYYY",
+            dayMonth: "MMM DD",
+            dateTime: "MM/DD/YYYY HH:mm",
+            fullDateTime: "MM/DD/YYYY HH:mm:ss",
+            dateTimeAM: "MM/DD/YYYY hh:mm A",
+            apiDate: "YYYY/MM/DD",
+            apiDateTime: "YYYY-MM-DD[T]HH:mm:ssZ",
+            apiDateTimeNoZ: "YYYY-MM-DD[T]HH:mm:ss",
+            apiDateMonthYear: "MMM DD YYYY",
+            urlParam: "YYYY-MM-DD",
+        },
+        mask: {
+            phone: "(000) 000-0000",
+            date: "M0/d0/0000",
+            zipCode: {
+                US: "00000",
+                CA: "AAA AAA",
+            },
+            money: "0*.00",
+            number: "0*.00",
+            integer: "0*",
+            tax: "00.0000",
+            sku: "0000000000000",
+            upca: "000000000000",
+            pin: "000000",
+            mi9ProductUpc: "00000000000000",
+        },
+        regex: {
+            password: "^(?=.*[a-zA-Z])(?=.*[0-9]).{6,12}",
+            bigyPassword: "^(?=.*[a-zA-Z])(?=.*[0-9]).{8,}$",
+            url: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\.%_~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,
+            shortCode: "^[A-Z0-9_]{1,20}$",
+            longCode: "^[A-Z0-9_]{1,100}$",
+            email: /^[\w-\.]+@([\w]+[\.-])+[\w-]{2,}$/,
+            textWithoutSpecialChars: /^[a-zA-Z0-9\. ]+$/,
+            textWithSpecialChars: /^[a-zA-Z0-9_-]+$/,
+            // Allow char '_ -'
+            textWithSpaceAndSpecialChars: /^[a-zA-Z0-9\. /_-]+$/,
+            // Allow space and char '_ - /'
+            address: /^[a-zA-Z0-9][a-zA-Z0-9\_\/\. ]+$/,
+            leadTimeKeyPress: /^[0-9mhdw ]+$/,
+            leadTime: [
+                /^(?:(?<minutes>\d{0,2})m\s*)?(?:(?<hours>\d{0,3})h\s*)?(?:(?<days>\d{0,2})d\s*)?(?:(?<weeks>\d{0,2})w\s*)?$/,
+                /^(?:(?<weeks>\d{0,2})w\s*)?(?:(?<days>\d{0,2})d\s*)?(?:(?<hours>\d{0,3})h\s*)?(?:(?<minutes>\d{0,2})m\s*)?$/,
+            ],
+            userPIN: /^[0-9]{6}$/,
+            storeCode: /^[0-9]{1,10}$/,
+            sku: /^[0-9]{1,14}$/,
+            sku13: /^[0-9]{1,13}$/,
+            keyConfigProvider: /^[a-zA-Z0-9!*()_+\-\[\]{}:\\|,.<>\/]*$/,
+            //not allow character '?#%='
+            textNoSpace: /^[a-zA-Z]+$/,
+            textWithSpace: /^(\s+\S+\s*)*(?!\s).*$/,
+            //not allow a string containing only white spaces
+            slug: /^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/,
+            tag: /^[a-zA-Z0-9](-?_?[a-zA-Z0-9])*$/,
+            noSpace: /^[a-zA-Z0-9!*()_+\-\[\]{}:\\|,.<>\/\?\=\&\%\#\@]*$/,
         },
+        pattern: {},
+        pipe: {},
+        pageSizeOptions: [5, 10, 25, 50, 100],
+        maxOrderNumber: 99999,
+        // TinyMCE
+        tinyHeightDefault: "75vh",
+        tinyMCEPluginConfig: "print preview fullpage importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons",
+        tinyMCEToolbarConfig: "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | fileManagerButton | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor | pagebreak | charmap emoticons | fullscreen  preview save print | image media template link anchor codesample | ltr rtl",
     };
 
     /**