@energycap/components 0.39.23 → 0.39.24-ECAP-26526-file-upload-validation-fix.20240910-1046

package/fesm2020/energycap-components.mjs

@@ -4166,6 +4166,13 @@ class FileUploadComponent extends FormControlBase {
          * Optional property to control whether the user can select multiple files
          */
         this.multiSelect = false;
+        /**
+         * When true, the onFileSelected callback will not be called if the form is invalid.
+         * This is useful when the file needs to be validated before it can be uploaded.
+         * For server-side validation, leave this as false and use the onFileSelected callback
+         * to upload the file and handle any errors thrown by the API.
+         */
+        this.validateBeforeUpload = false;
     }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
@@ -4232,18 +4239,17 @@ class FileUploadComponent extends FormControlBase {
      * @param base64FileString Optional: Will have a value provided if the fileOutput is set to base64
      */
     async processFile(file, base64FileString = null) {
-        // If we have async validators on the file control we need to do validation before we trigger the upload
-        const validateBeforeUpload = !!this.formModel.controls.file.asyncValidator;
-        if (validateBeforeUpload) {
+        // If we are validating before upload we need to patch the file to the form to trigger validation before calling onFileSelected
+        if (this.validateBeforeUpload) {
             await this.validateFile(file, base64FileString);
         }
         if (this.onFileSelected) {
-            // Only call the onFileSelected callback to upload the file if the form group is valid
-            if (this.formModel.valid) {
+            // Only call the onFileSelected callback to upload the file if the form group is valid or we are not validating before upload
+            if (!this.validateBeforeUpload || this.formModel.valid) {
                 try {
                     let result = await this.onFileSelected(file);
                     // If we did validation, just patch the form result because the file is already in the form
-                    if (validateBeforeUpload) {
+                    if (this.validateBeforeUpload) {
                         this.formModel.patchValue({ uploadResult: result ?? null });
                     }
                     else {
@@ -4258,7 +4264,7 @@ class FileUploadComponent extends FormControlBase {
             // If we don't have an onFileSelected callback we just patch the form model.
             // In the case of pre-upload validation the form already has the file so we don't want to patch again.
         }
-        else if (!validateBeforeUpload) {
+        else if (!this.validateBeforeUpload) {
             this.formModel.patchValue({ base64FileString, file, name: file.name, uploadResult: null });
         }
     }
@@ -4310,7 +4316,7 @@ class FileUploadComponent extends FormControlBase {
     }
 }
 FileUploadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, deps: [{ token: ValidationMessageService }, { token: FormGroupHelper }], target: i0.ɵɵFactoryTarget.Component });
-FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\r\n               [formGroup]=\"formModel\"\r\n               [helpPopover]=\"helpPopover\"\r\n               [helpPopoverPosition]=\"helpPopoverPosition\"\r\n               class=\"mb-0\">\r\n  <div class=\"d-flex control-group\">\r\n    <div class=\"d-flex flex-grow position-relative\">\r\n      <input #fileInput\r\n             id=\"{{inputId}}_input\"\r\n             type=\"file\"\r\n             tabindex=\"-1\"\r\n             [attr.accept]=\"fileTypeAccept\"\r\n             (change)=\"fileChange($event.target.files)\"\r\n             [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n             [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n      <ec-form-control *ngIf=\"displayType === 'file'\"\r\n                       id=\"{{inputId}}_formControl\"\r\n                       class=\"text-truncate\"\r\n                       [required]=\"required\"\r\n                       [pending]=\"pending || formModel?.pending\">\r\n        <input id=\"{{inputId}}_name\"\r\n               [formControl]=\"formModel?.get('name')\"\r\n               type=\"text\"\r\n               [placeholder]=\"placeholder\"\r\n               [tabindex]=\"-1\">\r\n      </ec-form-control>\r\n    </div>\r\n    <ec-button *ngIf=\"displayType === 'file'\"\r\n               #browseBtn\r\n               id=\"{{inputId}}_browseBtn\"\r\n               (clicked)=\"fileInput.click()\"\r\n               type=\"secondary\"\r\n               [tabindex]=\"tabindex\"\r\n               [disabled]=\"formModel?.get('name').disabled\"\r\n               label=\"Browse\"\r\n               [autofocus]=\"autofocus\">\r\n    </ec-button>\r\n  </div>\r\n  <ec-button *ngIf=\"displayType === 'button'\"\r\n             id=\"{{inputId}}_btn\"\r\n             [pending]=\"pending\"\r\n             [type]=\"buttonType\"\r\n             [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n             (clicked)=\"fileInput.click()\"\r\n             style=\"width: 100%;\">\r\n  </ec-button>\r\n</ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { formModel: "formModel", placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", onMultipleFilesSelected: "onMultipleFilesSelected", displayType: "displayType", buttonLabel: "buttonLabel", buttonType: "buttonType", multiSelect: "multiSelect", validateBeforeUpload: "validateBeforeUpload" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ec-form-group [label]=\"label\"\r\n               [formGroup]=\"formModel\"\r\n               [helpPopover]=\"helpPopover\"\r\n               [helpPopoverPosition]=\"helpPopoverPosition\"\r\n               class=\"mb-0\">\r\n  <div class=\"d-flex control-group\">\r\n    <div class=\"d-flex flex-grow position-relative\">\r\n      <input #fileInput\r\n             id=\"{{inputId}}_input\"\r\n             type=\"file\"\r\n             tabindex=\"-1\"\r\n             [attr.accept]=\"fileTypeAccept\"\r\n             (change)=\"fileChange($event.target.files)\"\r\n             [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n             [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n      <ec-form-control *ngIf=\"displayType === 'file'\"\r\n                       id=\"{{inputId}}_formControl\"\r\n                       class=\"text-truncate\"\r\n                       [required]=\"required\"\r\n                       [pending]=\"pending || formModel?.pending\">\r\n        <input id=\"{{inputId}}_name\"\r\n               [formControl]=\"formModel?.get('name')\"\r\n               type=\"text\"\r\n               [placeholder]=\"placeholder\"\r\n               [tabindex]=\"-1\">\r\n      </ec-form-control>\r\n    </div>\r\n    <ec-button *ngIf=\"displayType === 'file'\"\r\n               #browseBtn\r\n               id=\"{{inputId}}_browseBtn\"\r\n               (clicked)=\"fileInput.click()\"\r\n               type=\"secondary\"\r\n               [tabindex]=\"tabindex\"\r\n               [disabled]=\"formModel?.get('name').disabled\"\r\n               label=\"Browse\"\r\n               [autofocus]=\"autofocus\">\r\n    </ec-button>\r\n  </div>\r\n  <ec-button *ngIf=\"displayType === 'button'\"\r\n             id=\"{{inputId}}_btn\"\r\n             [pending]=\"pending\"\r\n             [type]=\"buttonType\"\r\n             [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n             (clicked)=\"fileInput.click()\"\r\n             style=\"width: 100%;\">\r\n  </ec-button>\r\n</ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ButtonComponent, selector: "ec-button", inputs: ["id", "disabled", "icon", "label", "badge", "tabindex", "type", "pending", "pendingIcon", "customTemplate", "isSubmit", "autofocus"], outputs: ["clicked"] }, { kind: "component", type: FormControlComponent, selector: "ec-form-control", inputs: ["id", "icon", "actionIcon", "showClear", "pending", "required", "readonly"], outputs: ["actionClicked"] }, { kind: "component", type: FormGroupComponent, selector: "ec-form-group", inputs: ["id", "label", "formGroup", "labelPosition", "overrideValidationError", "hideValidationMessage", "helpPopover", "helpPopoverPosition"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
             args: [{ selector: "ec-file-upload", template: "<ec-form-group [label]=\"label\"\r\n               [formGroup]=\"formModel\"\r\n               [helpPopover]=\"helpPopover\"\r\n               [helpPopoverPosition]=\"helpPopoverPosition\"\r\n               class=\"mb-0\">\r\n  <div class=\"d-flex control-group\">\r\n    <div class=\"d-flex flex-grow position-relative\">\r\n      <input #fileInput\r\n             id=\"{{inputId}}_input\"\r\n             type=\"file\"\r\n             tabindex=\"-1\"\r\n             [attr.accept]=\"fileTypeAccept\"\r\n             (change)=\"fileChange($event.target.files)\"\r\n             [class.has-value]=\"displayType === 'file' ? formModel?.get('name').value : undefined\"\r\n             [attr.multiple]=\"multiSelect ? 'multiple' : undefined\">\r\n      <ec-form-control *ngIf=\"displayType === 'file'\"\r\n                       id=\"{{inputId}}_formControl\"\r\n                       class=\"text-truncate\"\r\n                       [required]=\"required\"\r\n                       [pending]=\"pending || formModel?.pending\">\r\n        <input id=\"{{inputId}}_name\"\r\n               [formControl]=\"formModel?.get('name')\"\r\n               type=\"text\"\r\n               [placeholder]=\"placeholder\"\r\n               [tabindex]=\"-1\">\r\n      </ec-form-control>\r\n    </div>\r\n    <ec-button *ngIf=\"displayType === 'file'\"\r\n               #browseBtn\r\n               id=\"{{inputId}}_browseBtn\"\r\n               (clicked)=\"fileInput.click()\"\r\n               type=\"secondary\"\r\n               [tabindex]=\"tabindex\"\r\n               [disabled]=\"formModel?.get('name').disabled\"\r\n               label=\"Browse\"\r\n               [autofocus]=\"autofocus\">\r\n    </ec-button>\r\n  </div>\r\n  <ec-button *ngIf=\"displayType === 'button'\"\r\n             id=\"{{inputId}}_btn\"\r\n             [pending]=\"pending\"\r\n             [type]=\"buttonType\"\r\n             [label]=\"buttonLabel ?? 'Browse_TC' | translate\"\r\n             (clicked)=\"fileInput.click()\"\r\n             style=\"width: 100%;\">\r\n  </ec-button>\r\n</ec-form-group>", styles: [":host{display:block;margin-bottom:1rem}ec-form-control{margin-bottom:0}ec-form-control ::ng-deep>.ec-focus-ring{display:none!important}input[type=file]{opacity:0;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;cursor:pointer}input[type=file].has-value{width:calc(100% - 1.5rem)}ec-button{--ec-button-border-color-secondary: var(--ec-form-control-border-color);--ec-button-color-icon-secondary: var(--ec-color-icon)}\n"] }]
@@ -4336,6 +4342,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], multiSelect: [{
                 type: Input
+            }], validateBeforeUpload: [{
+                type: Input
             }], fileInput: [{
                 type: ViewChild,
                 args: ["fileInput", { read: ElementRef, static: true }]