@energycap/components 0.39.4-ECAP-23220-bc-file-upload-dialog.20231219-1507 → 0.39.4-ECAP-23220-bc-file-upload-dialog.20231220-1222
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 +60 -50
- package/fesm2015/energycap-components.mjs +66 -51
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +59 -49
- package/fesm2020/energycap-components.mjs.map +1 -1
- package/lib/controls/file-upload/file-upload.component.d.ts +8 -1
- package/package.json +1 -1
|
@@ -3784,6 +3784,10 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3784
3784
|
* Default: file
|
|
3785
3785
|
*/
|
|
3786
3786
|
this.displayType = 'file';
|
|
3787
|
+
/**
|
|
3788
|
+
* Optional property to control whether the user can select multiple files
|
|
3789
|
+
*/
|
|
3790
|
+
this.multiSelect = false;
|
|
3787
3791
|
}
|
|
3788
3792
|
ngOnChanges(changes) {
|
|
3789
3793
|
super.ngOnChanges(changes);
|
|
@@ -3805,54 +3809,24 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3805
3809
|
}
|
|
3806
3810
|
});
|
|
3807
3811
|
}
|
|
3808
|
-
// * New fileChange method
|
|
3809
3812
|
async fileChange(files) {
|
|
3810
|
-
|
|
3813
|
+
if (this.multiSelect) {
|
|
3814
|
+
// Since we append the files to the form model when multiSelect=true, we need to clear the form model at the start
|
|
3815
|
+
this.clearFormModel();
|
|
3816
|
+
await this.handleMultipleFiles(files);
|
|
3817
|
+
}
|
|
3818
|
+
else {
|
|
3819
|
+
const file = files.item(0);
|
|
3811
3820
|
if (file) {
|
|
3812
|
-
|
|
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
|
-
;
|
|
3821
|
+
await this.readFile(file);
|
|
3825
3822
|
}
|
|
3826
|
-
}
|
|
3827
|
-
await Promise.all(promises);
|
|
3823
|
+
}
|
|
3828
3824
|
// Clear the file inputs value, this will allow the user to pick the same filenames again
|
|
3829
3825
|
// and cause fileChange to re-trigger.
|
|
3830
3826
|
if (this.fileInput) {
|
|
3831
3827
|
this.fileInput.nativeElement.value = '';
|
|
3832
3828
|
}
|
|
3833
3829
|
}
|
|
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
|
-
// }
|
|
3856
3830
|
/**
|
|
3857
3831
|
* Checks the file type and updates the file type accept property. This is what determines the file
|
|
3858
3832
|
* type choices that the user will be limited to in the file browse dialog
|
|
@@ -3883,7 +3857,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3883
3857
|
this.patchFileResult(file, base64FileString, result);
|
|
3884
3858
|
}
|
|
3885
3859
|
catch (e) {
|
|
3886
|
-
// Bummer, we're not going to do anything about it though.
|
|
3860
|
+
// Bummer, we're not going to do anything about it though.
|
|
3887
3861
|
// We are not patching any of the result so any existing information remains
|
|
3888
3862
|
}
|
|
3889
3863
|
}
|
|
@@ -3905,18 +3879,24 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3905
3879
|
* @param base64FileString
|
|
3906
3880
|
* @param onFileSelectedResult
|
|
3907
3881
|
*/
|
|
3908
|
-
// * Old method
|
|
3909
3882
|
patchFileResult(file, base64FileString, onFileSelectedResult) {
|
|
3883
|
+
console.log('inside patchFileResult');
|
|
3910
3884
|
// Get the current value of files from formModel
|
|
3911
3885
|
let files = this.formModel?.get('files')?.value || [];
|
|
3912
3886
|
let names = this.formModel?.get('names')?.value || [];
|
|
3913
|
-
// If
|
|
3914
|
-
|
|
3915
|
-
|
|
3887
|
+
// If multiSelect is true we need to append the file to the existing array
|
|
3888
|
+
// otherwise we'll just set the file to the form model
|
|
3889
|
+
if (this.multiSelect) {
|
|
3890
|
+
if (file) {
|
|
3891
|
+
files = [...files, file];
|
|
3892
|
+
}
|
|
3893
|
+
if (file?.name) {
|
|
3894
|
+
names = [...names, file.name];
|
|
3895
|
+
}
|
|
3916
3896
|
}
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
names = [
|
|
3897
|
+
else {
|
|
3898
|
+
files = [file];
|
|
3899
|
+
names = [file?.name];
|
|
3920
3900
|
}
|
|
3921
3901
|
this.formModel?.patchValue({
|
|
3922
3902
|
files: files,
|
|
@@ -3929,13 +3909,41 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3929
3909
|
else {
|
|
3930
3910
|
this.formModel.patchValue({ uploadResult: null });
|
|
3931
3911
|
}
|
|
3912
|
+
console.log('formModel.value', this.formModel?.value);
|
|
3913
|
+
}
|
|
3914
|
+
/* ---------------------------- Helper Functions ---------------------------- */
|
|
3915
|
+
clearFormModel() {
|
|
3916
|
+
this.formModel?.patchValue({
|
|
3917
|
+
files: null,
|
|
3918
|
+
names: null,
|
|
3919
|
+
base64FileString: null,
|
|
3920
|
+
uploadResult: null
|
|
3921
|
+
});
|
|
3922
|
+
}
|
|
3923
|
+
async handleMultipleFiles(files) {
|
|
3924
|
+
const promises = Array.from(files).map((file) => this.readFile(file));
|
|
3925
|
+
await Promise.all(promises);
|
|
3926
|
+
}
|
|
3927
|
+
;
|
|
3928
|
+
async readFile(file) {
|
|
3929
|
+
const reader = new FileReader();
|
|
3930
|
+
reader.onloadend = async (e) => {
|
|
3931
|
+
const base64FileString = reader?.result?.toString().split(",")[1];
|
|
3932
|
+
await this.processFile(file, base64FileString);
|
|
3933
|
+
};
|
|
3934
|
+
if (this.isBase64FileOutput()) {
|
|
3935
|
+
reader.readAsDataURL(file);
|
|
3936
|
+
}
|
|
3937
|
+
else {
|
|
3938
|
+
await this.processFile(file);
|
|
3939
|
+
}
|
|
3932
3940
|
}
|
|
3933
3941
|
}
|
|
3934
3942
|
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 });
|
|
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('
|
|
3943
|
+
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", 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 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('names').value\"\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\">\r\n <input id=\"{{inputId}}_name\"\r\n [formControl]=\"formModel?.get('names')\"\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('names').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}}_btn\"\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" }] });
|
|
3936
3944
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3937
3945
|
type: Component,
|
|
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('
|
|
3946
|
+
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('names').value\"\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\">\r\n <input id=\"{{inputId}}_name\"\r\n [formControl]=\"formModel?.get('names')\"\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('names').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}}_btn\"\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"] }]
|
|
3939
3947
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3940
3948
|
type: Input
|
|
3941
3949
|
}], fileType: [{
|
|
@@ -3950,6 +3958,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3950
3958
|
type: Input
|
|
3951
3959
|
}], buttonLabel: [{
|
|
3952
3960
|
type: Input
|
|
3961
|
+
}], multiSelect: [{
|
|
3962
|
+
type: Input
|
|
3953
3963
|
}], fileInput: [{
|
|
3954
3964
|
type: ViewChild,
|
|
3955
3965
|
args: ["fileInput", { read: ElementRef, static: true }]
|