@energycap/components 0.39.4-ECAP-23220-bc-file-upload-dialog.20231218-1520 → 0.39.4-ECAP-23220-bc-file-upload-dialog.20231219-1515
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/controls/file-upload/file-upload.component.mjs +67 -30
- package/fesm2015/energycap-components.mjs +69 -32
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +68 -31
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/file-upload/file-upload.component.d.ts +6 -2
- package/package.json +1 -1
- package/src/assets/locales/en_US.json +3 -1
|
@@ -3756,8 +3756,8 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3756
3756
|
// static class to create the form group from a parent component
|
|
3757
3757
|
static getFormModel(validators, disabled = false) {
|
|
3758
3758
|
let formGroup = new UntypedFormGroup({
|
|
3759
|
-
|
|
3760
|
-
|
|
3759
|
+
files: new UntypedFormControl({ value: null, disabled: disabled }, validators),
|
|
3760
|
+
names: new UntypedFormControl({ value: null, disabled: disabled }, validators),
|
|
3761
3761
|
base64FileString: new UntypedFormControl(null),
|
|
3762
3762
|
uploadResult: new UntypedFormControl(null)
|
|
3763
3763
|
});
|
|
@@ -3797,39 +3797,62 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3797
3797
|
this.formModel?.get('name')?.valueChanges.pipe(takeUntil(this.componentDestroyed)).subscribe(value => {
|
|
3798
3798
|
if (!value) {
|
|
3799
3799
|
this.formModel.patchValue({
|
|
3800
|
-
|
|
3800
|
+
files: null,
|
|
3801
|
+
names: null,
|
|
3801
3802
|
base64FileString: null,
|
|
3802
3803
|
uploadResult: null
|
|
3803
3804
|
});
|
|
3804
3805
|
}
|
|
3805
3806
|
});
|
|
3806
3807
|
}
|
|
3808
|
+
// * New fileChange method
|
|
3807
3809
|
async fileChange(files) {
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
|
-
|
|
3818
|
-
|
|
3819
|
-
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
|
|
3823
|
-
else {
|
|
3824
|
-
await this.processFile(file);
|
|
3825
|
-
}
|
|
3826
|
-
// Clear the file inputs value, this will allow the user to pick the same filename and cause
|
|
3827
|
-
// the fileChange to trigger.
|
|
3828
|
-
if (this.fileInput) {
|
|
3829
|
-
this.fileInput.nativeElement.value = '';
|
|
3810
|
+
const promises = Array.from(files).map((file) => new Promise((resolve) => {
|
|
3811
|
+
if (file) {
|
|
3812
|
+
const reader = new FileReader();
|
|
3813
|
+
reader.onloadend = async (e) => {
|
|
3814
|
+
const base64FileString = reader?.result?.toString().split(",")[1];
|
|
3815
|
+
await this.processFile(file, base64FileString);
|
|
3816
|
+
resolve(null);
|
|
3817
|
+
};
|
|
3818
|
+
if (this.isBase64FileOutput()) {
|
|
3819
|
+
reader.readAsDataURL(file);
|
|
3820
|
+
}
|
|
3821
|
+
else {
|
|
3822
|
+
resolve(this.processFile(file));
|
|
3823
|
+
}
|
|
3824
|
+
;
|
|
3830
3825
|
}
|
|
3831
|
-
}
|
|
3832
|
-
|
|
3826
|
+
}));
|
|
3827
|
+
await Promise.all(promises);
|
|
3828
|
+
// Clear the file inputs value, this will allow the user to pick the same filenames again
|
|
3829
|
+
// and cause fileChange to re-trigger.
|
|
3830
|
+
if (this.fileInput) {
|
|
3831
|
+
this.fileInput.nativeElement.value = '';
|
|
3832
|
+
}
|
|
3833
|
+
}
|
|
3834
|
+
// * Old Method
|
|
3835
|
+
// public async fileChange(files: FileList): Promise<void> {
|
|
3836
|
+
// let file = files.item(0);
|
|
3837
|
+
// // If there is a file selected and then opened again and click cancel you get null so don't try and set anything
|
|
3838
|
+
// if (file) {
|
|
3839
|
+
// let reader: FileReader = new FileReader();
|
|
3840
|
+
// reader.onloadend = async e => {
|
|
3841
|
+
// let base64FileString: string | undefined = reader?.result?.toString().split(",")[1];
|
|
3842
|
+
// this.processFile(file!, base64FileString);
|
|
3843
|
+
// };
|
|
3844
|
+
// if (this.isBase64FileOutput()) {
|
|
3845
|
+
// reader.readAsDataURL(file);
|
|
3846
|
+
// } else {
|
|
3847
|
+
// await this.processFile(file!);
|
|
3848
|
+
// }
|
|
3849
|
+
// // Clear the file inputs value, this will allow the user to pick the same filename and cause
|
|
3850
|
+
// // the fileChange to trigger.
|
|
3851
|
+
// if (this.fileInput) {
|
|
3852
|
+
// this.fileInput.nativeElement.value = '';
|
|
3853
|
+
// }
|
|
3854
|
+
// }
|
|
3855
|
+
// }
|
|
3833
3856
|
/**
|
|
3834
3857
|
* Checks the file type and updates the file type accept property. This is what determines the file
|
|
3835
3858
|
* type choices that the user will be limited to in the file browse dialog
|
|
@@ -3882,10 +3905,22 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3882
3905
|
* @param base64FileString
|
|
3883
3906
|
* @param onFileSelectedResult
|
|
3884
3907
|
*/
|
|
3908
|
+
// * Old method
|
|
3885
3909
|
patchFileResult(file, base64FileString, onFileSelectedResult) {
|
|
3910
|
+
// Get the current value of files from formModel
|
|
3911
|
+
let files = this.formModel?.get('files')?.value || [];
|
|
3912
|
+
let names = this.formModel?.get('names')?.value || [];
|
|
3913
|
+
// If the file is not null, append it to the files array
|
|
3914
|
+
if (file) {
|
|
3915
|
+
files = [...files, file];
|
|
3916
|
+
}
|
|
3917
|
+
// If the file name is not null, append it to the names array
|
|
3918
|
+
if (file?.name) {
|
|
3919
|
+
names = [...names, file.name];
|
|
3920
|
+
}
|
|
3886
3921
|
this.formModel?.patchValue({
|
|
3887
|
-
|
|
3888
|
-
|
|
3922
|
+
files: files,
|
|
3923
|
+
names: names,
|
|
3889
3924
|
base64FileString: base64FileString ?? null
|
|
3890
3925
|
});
|
|
3891
3926
|
if (onFileSelectedResult) {
|
|
@@ -3897,10 +3932,10 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3897
3932
|
}
|
|
3898
3933
|
}
|
|
3899
3934
|
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 });
|
|
3900
|
-
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", displayType: "displayType" }, 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 class=\"mb-0\">\r\n <div class=\"d-flex
|
|
3935
|
+
FileUploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: FileUploadComponent, selector: "ec-file-upload", inputs: { placeholder: "placeholder", fileType: "fileType", fileOutput: "fileOutput", customExtensions: "customExtensions", onFileSelected: "onFileSelected", displayType: "displayType", buttonLabel: "buttonLabel" }, 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 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]=\"formModel?.get('name')?.value\"\r\n multiple>\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\">\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 #selectZipFilesBtn\r\n id=\"{{inputId}}_browseBtn\"\r\n [pending]=\"pending\"\r\n type=\"primary\"\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"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
|
|
3901
3936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3902
3937
|
type: Component,
|
|
3903
|
-
args: [{ selector: "ec-file-upload", template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\r\n class=\"mb-0\">\r\n <div class=\"d-flex
|
|
3938
|
+
args: [{ selector: "ec-file-upload", template: "<ec-form-group [label]=\"label\"\r\n [formGroup]=\"formModel\"\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]=\"formModel?.get('name')?.value\"\r\n multiple>\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\">\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 #selectZipFilesBtn\r\n id=\"{{inputId}}_browseBtn\"\r\n [pending]=\"pending\"\r\n type=\"primary\"\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"] }]
|
|
3904
3939
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3905
3940
|
type: Input
|
|
3906
3941
|
}], fileType: [{
|
|
@@ -3913,6 +3948,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3913
3948
|
type: Input
|
|
3914
3949
|
}], displayType: [{
|
|
3915
3950
|
type: Input
|
|
3951
|
+
}], buttonLabel: [{
|
|
3952
|
+
type: Input
|
|
3916
3953
|
}], fileInput: [{
|
|
3917
3954
|
type: ViewChild,
|
|
3918
3955
|
args: ["fileInput", { read: ElementRef, static: true }]
|