@energycap/components 0.39.3 → 0.39.4-ECAP-23220-bc-file-upload-dialog.20231219-1507
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 +81 -30
- package/fesm2015/energycap-components.mjs +77 -28
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +76 -27
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/file-upload/file-upload.component.d.ts +12 -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
|
});
|
|
@@ -3778,6 +3778,12 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3778
3778
|
* File output, determines which properties are supplied on the formModel
|
|
3779
3779
|
*/
|
|
3780
3780
|
this.fileOutput = 'base64';
|
|
3781
|
+
/**
|
|
3782
|
+
* Optional display type that controls whether the file input textbox is displayed or
|
|
3783
|
+
* simply a button the user clicks to launch the OS file storage dialog.
|
|
3784
|
+
* Default: file
|
|
3785
|
+
*/
|
|
3786
|
+
this.displayType = 'file';
|
|
3781
3787
|
}
|
|
3782
3788
|
ngOnChanges(changes) {
|
|
3783
3789
|
super.ngOnChanges(changes);
|
|
@@ -3791,35 +3797,62 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3791
3797
|
this.formModel?.get('name')?.valueChanges.pipe(takeUntil(this.componentDestroyed)).subscribe(value => {
|
|
3792
3798
|
if (!value) {
|
|
3793
3799
|
this.formModel.patchValue({
|
|
3794
|
-
|
|
3800
|
+
files: null,
|
|
3801
|
+
names: null,
|
|
3795
3802
|
base64FileString: null,
|
|
3796
3803
|
uploadResult: null
|
|
3797
3804
|
});
|
|
3798
3805
|
}
|
|
3799
3806
|
});
|
|
3800
3807
|
}
|
|
3808
|
+
// * New fileChange method
|
|
3801
3809
|
async fileChange(files) {
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
|
-
// the fileChange to trigger.
|
|
3818
|
-
if (this.fileInput) {
|
|
3819
|
-
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
|
+
;
|
|
3820
3825
|
}
|
|
3821
|
-
}
|
|
3822
|
-
|
|
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
|
+
// }
|
|
3823
3856
|
/**
|
|
3824
3857
|
* Checks the file type and updates the file type accept property. This is what determines the file
|
|
3825
3858
|
* type choices that the user will be limited to in the file browse dialog
|
|
@@ -3872,10 +3905,22 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3872
3905
|
* @param base64FileString
|
|
3873
3906
|
* @param onFileSelectedResult
|
|
3874
3907
|
*/
|
|
3908
|
+
// * Old method
|
|
3875
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
|
+
}
|
|
3876
3921
|
this.formModel?.patchValue({
|
|
3877
|
-
|
|
3878
|
-
|
|
3922
|
+
files: files,
|
|
3923
|
+
names: names,
|
|
3879
3924
|
base64FileString: base64FileString ?? null
|
|
3880
3925
|
});
|
|
3881
3926
|
if (onFileSelectedResult) {
|
|
@@ -3887,10 +3932,10 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3887
3932
|
}
|
|
3888
3933
|
}
|
|
3889
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 });
|
|
3890
|
-
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" }, 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 (
|
|
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" }] });
|
|
3891
3936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3892
3937
|
type: Component,
|
|
3893
|
-
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 (
|
|
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"] }]
|
|
3894
3939
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3895
3940
|
type: Input
|
|
3896
3941
|
}], fileType: [{
|
|
@@ -3901,6 +3946,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3901
3946
|
type: Input
|
|
3902
3947
|
}], onFileSelected: [{
|
|
3903
3948
|
type: Input
|
|
3949
|
+
}], displayType: [{
|
|
3950
|
+
type: Input
|
|
3951
|
+
}], buttonLabel: [{
|
|
3952
|
+
type: Input
|
|
3904
3953
|
}], fileInput: [{
|
|
3905
3954
|
type: ViewChild,
|
|
3906
3955
|
args: ["fileInput", { read: ElementRef, static: true }]
|