mmhglobal-dynamicform 2.26.0 → 2.27.0

package/fesm2020/mmhglobal-dynamicform.mjs

@@ -8245,7 +8245,7 @@ class ZuploadComponent extends InputFieldBase {
     //   DivClass: "col-md-12 col-md-6",
     //   Visible: true
     // }];
-    constructor(componentService, authService, compressImage, zcoreService, ngZone, sharePointService) {
+    constructor(componentService, authService, compressImage, zcoreService, ngZone, sharePointService, alertService) {
         super(componentService);
         this.componentService = componentService;
         this.authService = authService;
@@ -8253,6 +8253,7 @@ class ZuploadComponent extends InputFieldBase {
         this.zcoreService = zcoreService;
         this.ngZone = ngZone;
         this.sharePointService = sharePointService;
+        this.alertService = alertService;
         this.uploadAttachmentUrl = null;
         this.uploadSaveUrl = "/Attachment/Chunk_Upload_Save"; // should represent an actual API endpoint
         this.uploadRemoveUrl = "/Attachment/Chunk_Upload_Remove"; // should represent an actual API endpoint
@@ -8313,6 +8314,9 @@ class ZuploadComponent extends InputFieldBase {
         if (this.data.Multiple) {
             this.isMultiple = this.data.Multiple;
         }
+        if (this.data.AllowedFileExtension) {
+            this.restrictions.allowedExtensions = this.restrictions.allowedExtensions.concat(this.data.AllowedFileExtension);
+        }
         this.componentProperties.style.style6 = this.componentProperties.style.style6 || "margin: 5px; border: 1px solid gray;";
     }
     onSuccess(e) {
@@ -8407,18 +8411,24 @@ class ZuploadComponent extends InputFieldBase {
         // Image Preview
         const me = this;
         e.files.forEach((file) => {
-            if (file.rawFile && file.rawFile.type.includes("image")) {
-                if (!file.validationErrors) {
-                    const reader = new FileReader();
-                    reader.onload = function (ev) {
-                        if (me.data.EnableImagePreview) {
-                            if (!me.uid.includes(file.uid)) {
-                                me.uid.push(file.uid);
-                                me.imagePreviews.push({ ...file, src: reader.result });
+            if (!me.isValidUploadedFile(me, file)) {
+                e.preventDefault();
+                return;
+            }
+            else {
+                if (file.rawFile && file.rawFile.type.includes("image")) {
+                    if (!file.validationErrors) {
+                        const reader = new FileReader();
+                        reader.onload = function (ev) {
+                            if (me.data.EnableImagePreview) {
+                                if (!me.uid.includes(file.uid)) {
+                                    me.uid.push(file.uid);
+                                    me.imagePreviews.push({ ...file, src: reader.result });
+                                }
                             }
-                        }
-                    };
-                    reader.readAsDataURL(file.rawFile);
+                        };
+                        reader.readAsDataURL(file.rawFile);
+                    }
                 }
             }
         });
@@ -8482,38 +8492,60 @@ class ZuploadComponent extends InputFieldBase {
             });
         }
     }
+    isValidUploadedFile(me, file) {
+        const fileSize = file.rawFile.size;
+        const fileExtension = file.rawFile.name.split('.').pop().toLowerCase();
+        // Check if file size and extension are valid
+        if (fileSize > me.restrictions.maxFileSize || !me.restrictions.allowedExtensions.includes(fileExtension)) {
+            let errorMessage = 'Error: ';
+            if (!me.restrictions.allowedExtensions.includes(fileExtension)) {
+                errorMessage = `Invalid file type. Allowed types are: ${me.restrictions.allowedExtensions.join(', ')}.`;
+            }
+            else if (fileSize > me.restrictions.maxFileSize) {
+                errorMessage = `File size cannot exceeds ${me.formatFileSize(me.restrictions.maxFileSize)}.`;
+            }
+            me.alertService.showOkay('Failed to upload', errorMessage, ['col-4']);
+            return false;
+        }
+        return true;
+    }
     selectEventHandler(e) {
         const me = this;
-        /****** sharepoint ******/
+        //#region sharepoint
         const attachmentInfo = this.sharePointService.getAttachmentInfo(this.data["DownloadFileConfig"]);
-        //change uploadSaveUrl
+        // Change uploadSaveUrl if saving to SharePoint
         if (attachmentInfo && attachmentInfo.isSaveToSharePoint && attachmentInfo.siteName) {
             const attachmentSourceUrl = this.zcoreService.getEnvironment().attachmentSourceUrl;
             this.uploadSaveUrl = attachmentSourceUrl + '/Chunk_Upload_Save';
         }
-        /****** sharepoint ******/
+        //#endregion
         if (this.data['SelectFileOnly']) {
-            // append all file to component memory
+            // Append all files to component memory
             e.files.forEach(async (file) => {
-                if (file.rawFile) {
-                    const reader = new FileReader();
-                    reader.onload = function (ev) {
-                        // clone the data and also add the readed file to the object
-                        const fileData = Object.assign({}, file);
-                        fileData['file'] = ev.target["result"];
-                        // push to component fileList
-                        me.fileList.push(fileData);
-                        me.group['zupload_' + me.data.Value] = me.fileList;
-                        if (me.data['FileSelectedEvent']) {
-                            // call the project event
-                            me.group.subject.next({
-                                type: "zupload-fileSelectedEvent",
-                                target: me.data['FileSelectedEvent'],
-                                data: me.fileList
-                            });
-                        }
-                    };
-                    await reader.readAsDataURL(file.rawFile);
+                if (me.isValidUploadedFile(me, file)) {
+                    if (file.rawFile) {
+                        const reader = new FileReader();
+                        reader.onload = function (ev) {
+                            // Clone the data and also add the read file to the object
+                            const fileData = Object.assign({}, file);
+                            fileData['file'] = ev.target["result"];
+                            // Push to component fileList
+                            me.fileList.push(fileData);
+                            me.group['zupload_' + me.data.Value] = me.fileList;
+                            if (me.data['FileSelectedEvent']) {
+                                // Call the project event
+                                me.group.subject.next({
+                                    type: "zupload-fileSelectedEvent",
+                                    target: me.data['FileSelectedEvent'],
+                                    data: me.fileList
+                                });
+                            }
+                        };
+                        await reader.readAsDataURL(file.rawFile);
+                    }
+                }
+                else {
+                    e.preventDefault();
                 }
             });
         }
@@ -8525,29 +8557,32 @@ class ZuploadComponent extends InputFieldBase {
                 //Check if Image Compression is enabled.
                 if (imageCompressionEnabled === true) {
                     e.files.forEach((file) => {
-                        // Compress only if it is an image file
-                        if (file.rawFile && file.rawFile.type.includes("image")) {
-                            if (!file.validationErrors) {
-                                const imgConfig = this.compressionConfigHandler(this.data.Compression);
-                                if (file.size > imgConfig.FileSizeMinSizeByte) {
-                                    me.compressImage.compress(file.rawFile, imgConfig) //Pass in parameter to set the Compression Options
-                                        .pipe(take(1))
-                                        .subscribe(compressFile => {
-                                        this.ngZone.run(() => {
-                                            file.rawFile = compressFile;
-                                            file.size = compressFile.size;
-                                            // clone the data and also add the readed file to the object
-                                            const fileData = Object.assign({}, file);
-                                            // push to component fileList
-                                            me.fileList.push(fileData);
-                                            const reader = new FileReader();
-                                            reader.readAsDataURL(file.rawFile);
+                        if (me.isValidUploadedFile(me, file)) {
+                            // Compress only if it is an image file
+                            if (file.rawFile && file.rawFile.type.includes("image")) {
+                                if (!file.validationErrors) {
+                                    const imgConfig = this.compressionConfigHandler(this.data.Compression);
+                                    if (file.size > imgConfig.FileSizeMinSizeByte) {
+                                        me.compressImage.compress(file.rawFile, imgConfig) //Pass in parameter to set the Compression Options
+                                            .pipe(take(1))
+                                            .subscribe(compressFile => {
+                                            this.ngZone.run(() => {
+                                                file.rawFile = compressFile;
+                                                file.size = compressFile.size;
+                                                // Push to component fileList
+                                                me.fileList.push(Object.assign({}, file));
+                                                const reader = new FileReader();
+                                                reader.readAsDataURL(file.rawFile);
+                                            });
+                                            console.log(`Compressed file size: ${(file.rawFile.size / 1024).toFixed(2)}KB`);
                                         });
-                                        console.log(`Compressed file size: ${(file.rawFile.size / 1024).toFixed(2)}KB`);
-                                    });
-                                } // file size check
-                            } // validationErrors check
-                        } // file type check
+                                    } // file size check
+                                } // validationErrors check
+                            } // file type check
+                        }
+                        else {
+                            e.preventDefault();
+                        }
                     }); // loop each file
                 } // imagecompression check
                 // add to group scope
@@ -8559,13 +8594,20 @@ class ZuploadComponent extends InputFieldBase {
         this.uploadComponent.clearFiles();
         this.group['zupload_' + this.data.Value] = this.fileList;
     }
+    formatFileSize(bytes) {
+        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+        if (bytes === 0)
+            return '0 Byte';
+        const i = Math.floor(Math.log(bytes) / Math.log(1024));
+        return parseFloat((bytes / Math.pow(1024, i)).toFixed(2)) + sizes[i];
+    }
 }
-ZuploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, deps: [{ token: ZComponentService }, { token: i2.AuthService }, { token: i2.CompressImageService }, { token: i2.ZCoreService }, { token: i0.NgZone }, { token: i2.SharePointService }], target: i0.ɵɵFactoryTarget.Component });
-ZuploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZuploadComponent, selector: "app-zupload", viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: ["uploadComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload #uploadComponent *ngIf=\"!data.SelectFileOnly\" [id]=\"data.Value\" [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\" [removeUrl]=\"uploadRemoveUrl\" [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\" [chunkable]=\"chunkSettings\" [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\" (remove)=\"onRemove($event)\" (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect #uploadComponent *ngIf=\"data.SelectFileOnly\" [id]=\"data.Value\" (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\" [formControlName]=\"data.Value\" (valueChange)=\"onChange($event)\" [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\" class=e1tag-style1>\r\n  </kendo-fileselect>\r\n\r\n  <div *ngIf=\"imagePreviews.length\" class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div class=\"label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div class=\"image-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <img *ngFor=\"let image of imagePreviews\" [src]=\"image.src\" alt=\"image preview\" height=\"100\" class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"], components: [{ type: i3$7.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "multiple", "disabled", "showFileList", "tabindex", "zoneId", "tabIndex", "accept", "restrictions", "focusableId", "actionsLayout"], outputs: ["blur", "cancel", "clear", "complete", "error", "focus", "pause", "remove", "resume", "select", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { type: i3$7.FileSelectComponent, selector: "kendo-fileselect", inputs: ["accept", "disabled", "multiple", "name", "showFileList", "tabindex", "restrictions", "zoneId", "focusableId"], outputs: ["blur", "focus", "select", "remove", "valueChange"], exportAs: ["kendoFileSelect"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+ZuploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, deps: [{ token: ZComponentService }, { token: i2.AuthService }, { token: i2.CompressImageService }, { token: i2.ZCoreService }, { token: i0.NgZone }, { token: i2.SharePointService }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+ZuploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: ZuploadComponent, selector: "app-zupload", viewQueries: [{ propertyName: "uploadComponent", first: true, predicate: ["uploadComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload\r\n    *ngIf=\"!data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\"\r\n    [removeUrl]=\"uploadRemoveUrl\"\r\n    [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\"\r\n    [chunkable]=\"chunkSettings\"\r\n    [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect\r\n    *ngIf=\"data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    [formControlName]=\"data.Value\"\r\n    (valueChange)=\"onChange($event)\" \r\n    [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-fileselect>\r\n\r\n  <div\r\n    *ngIf=\"imagePreviews.length\"\r\n    class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div\r\n      class=\"label-container e1tag-style3\"\r\n      [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div\r\n      class=\"image-container e1tag-style4\"\r\n      [style]=\"componentProperties.style.style4\">\r\n      <img\r\n        *ngFor=\"let image of imagePreviews\"\r\n        [src]=\"image.src\"\r\n        alt=\"image preview\"\r\n        height=\"100\"\r\n        class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"], components: [{ type: i3$7.UploadComponent, selector: "kendo-upload", inputs: ["autoUpload", "batch", "withCredentials", "saveField", "saveHeaders", "saveMethod", "saveUrl", "responseType", "removeField", "removeHeaders", "removeMethod", "removeUrl", "chunkable", "concurrent", "multiple", "disabled", "showFileList", "tabindex", "zoneId", "tabIndex", "accept", "restrictions", "focusableId", "actionsLayout"], outputs: ["blur", "cancel", "clear", "complete", "error", "focus", "pause", "remove", "resume", "select", "success", "upload", "uploadProgress", "valueChange"], exportAs: ["kendoUpload"] }, { type: i3$7.FileSelectComponent, selector: "kendo-fileselect", inputs: ["accept", "disabled", "multiple", "name", "showFileList", "tabindex", "restrictions", "zoneId", "focusableId"], outputs: ["blur", "focus", "select", "remove", "valueChange"], exportAs: ["kendoFileSelect"] }], directives: [{ type: i4$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i4$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: ZuploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: "app-zupload", template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload #uploadComponent *ngIf=\"!data.SelectFileOnly\" [id]=\"data.Value\" [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\" [removeUrl]=\"uploadRemoveUrl\" [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\" [chunkable]=\"chunkSettings\" [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\" (remove)=\"onRemove($event)\" (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\" [style]=\"componentProperties.style.style1\" class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect #uploadComponent *ngIf=\"data.SelectFileOnly\" [id]=\"data.Value\" (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\" [formControlName]=\"data.Value\" (valueChange)=\"onChange($event)\" [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\" class=e1tag-style1>\r\n  </kendo-fileselect>\r\n\r\n  <div *ngIf=\"imagePreviews.length\" class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div class=\"label-container e1tag-style3\" [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div class=\"image-container e1tag-style4\" [style]=\"componentProperties.style.style4\">\r\n      <img *ngFor=\"let image of imagePreviews\" [src]=\"image.src\" alt=\"image preview\" height=\"100\" class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.AuthService }, { type: i2.CompressImageService }, { type: i2.ZCoreService }, { type: i0.NgZone }, { type: i2.SharePointService }]; }, propDecorators: { uploadComponent: [{
+            args: [{ selector: "app-zupload", template: "<div [formGroup]=\"form\" class=\"zupload-container e1tag-style\" [style]=\"componentProperties.style.style\">\r\n  <kendo-upload\r\n    *ngIf=\"!data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    [autoUpload]=\"isAutoUpload\"\r\n    [saveUrl]=\"uploadSaveUrl\"\r\n    [removeUrl]=\"uploadRemoveUrl\"\r\n    [restrictions]=\"restrictions\"\r\n    [multiple]=\"isMultiple\"\r\n    [chunkable]=\"chunkSettings\"\r\n    [showFileList]=\"showFileList\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    (success)=\"onSuccess($event)\"\r\n    (upload)=\"uploadEventHandler($event)\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-upload>\r\n\r\n  <kendo-fileselect\r\n    *ngIf=\"data.SelectFileOnly\"\r\n    #uploadComponent\r\n    [id]=\"data.Value\"\r\n    (select)=\"selectEventHandler($event)\"\r\n    (remove)=\"onRemove($event)\"\r\n    [formControlName]=\"data.Value\"\r\n    (valueChange)=\"onChange($event)\" \r\n    [restrictions]=\"restrictions\"\r\n    [style]=\"componentProperties.style.style1\"\r\n    class=\"e1tag-style1\">\r\n  </kendo-fileselect>\r\n\r\n  <div\r\n    *ngIf=\"imagePreviews.length\"\r\n    class=\"image-preview-container e1tag-style2\"\r\n    [style]=\"componentProperties.style.style2\">\r\n    <div\r\n      class=\"label-container e1tag-style3\"\r\n      [style]=\"componentProperties.style.style3\">\r\n      Image Preview:\r\n    </div>\r\n    <div\r\n      class=\"image-container e1tag-style4\"\r\n      [style]=\"componentProperties.style.style4\">\r\n      <img\r\n        *ngFor=\"let image of imagePreviews\"\r\n        [src]=\"image.src\"\r\n        alt=\"image preview\"\r\n        height=\"100\"\r\n        class=\"e1tag-style5\"\r\n        [style]=\"componentProperties.style.style5\" />\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".image-preview-container{border:1px solid rgba(0,0,0,.08)}.image-preview-container>.label-container{margin:5px}\n"] }]
+        }], ctorParameters: function () { return [{ type: ZComponentService }, { type: i2.AuthService }, { type: i2.CompressImageService }, { type: i2.ZCoreService }, { type: i0.NgZone }, { type: i2.SharePointService }, { type: i2.AlertService }]; }, propDecorators: { uploadComponent: [{
                 type: ViewChild,
                 args: ["uploadComponent"]
             }] } });