@energycap/components 0.39.4-ECAP-23220-bc-file-upload-dialog.20231219-1515 → 0.39.4-ECAP-23220-bc-file-upload-dialog.20231220-1435
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 +62 -51
- package/fesm2015/energycap-components.mjs +68 -52
- package/fesm2015/energycap-components.mjs.map +1 -1
- package/fesm2020/energycap-components.mjs +61 -50
- 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);
|
|
@@ -3794,7 +3798,7 @@ class FileUploadComponent extends FormControlBase {
|
|
|
3794
3798
|
// Watch for name to change, if the value is cleared we will clear the other
|
|
3795
3799
|
// supporting model properties. The name can be cleared by the user manually or via
|
|
3796
3800
|
// the clear button
|
|
3797
|
-
this.formModel?.get('
|
|
3801
|
+
this.formModel?.get('names')?.valueChanges.pipe(takeUntil(this.componentDestroyed)).subscribe(value => {
|
|
3798
3802
|
if (!value) {
|
|
3799
3803
|
this.formModel.patchValue({
|
|
3800
3804
|
files: null,
|
|
@@ -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,42 @@ 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
|
+
console.log('this.formModel?.get("names")?.value', this.formModel?.get('names')?.value);
|
|
3914
|
+
}
|
|
3915
|
+
/* ---------------------------- Helper Functions ---------------------------- */
|
|
3916
|
+
clearFormModel() {
|
|
3917
|
+
this.formModel?.patchValue({
|
|
3918
|
+
files: null,
|
|
3919
|
+
names: null,
|
|
3920
|
+
base64FileString: null,
|
|
3921
|
+
uploadResult: null
|
|
3922
|
+
});
|
|
3923
|
+
}
|
|
3924
|
+
async handleMultipleFiles(files) {
|
|
3925
|
+
const promises = Array.from(files).map((file) => this.readFile(file));
|
|
3926
|
+
await Promise.all(promises);
|
|
3927
|
+
}
|
|
3928
|
+
;
|
|
3929
|
+
async readFile(file) {
|
|
3930
|
+
const reader = new FileReader();
|
|
3931
|
+
reader.onloadend = async (e) => {
|
|
3932
|
+
const base64FileString = reader?.result?.toString().split(",")[1];
|
|
3933
|
+
await this.processFile(file, base64FileString);
|
|
3934
|
+
};
|
|
3935
|
+
if (this.isBase64FileOutput()) {
|
|
3936
|
+
reader.readAsDataURL(file);
|
|
3937
|
+
}
|
|
3938
|
+
else {
|
|
3939
|
+
await this.processFile(file);
|
|
3940
|
+
}
|
|
3932
3941
|
}
|
|
3933
3942
|
}
|
|
3934
3943
|
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('
|
|
3944
|
+
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]=\"displayType === 'file' ? formModel?.get('names').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\">\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
3945
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
3937
3946
|
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('
|
|
3947
|
+
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]=\"displayType === 'file' ? formModel?.get('names').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\">\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
3948
|
}], ctorParameters: function () { return [{ type: ValidationMessageService }, { type: FormGroupHelper }]; }, propDecorators: { placeholder: [{
|
|
3940
3949
|
type: Input
|
|
3941
3950
|
}], fileType: [{
|
|
@@ -3950,6 +3959,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
|
|
|
3950
3959
|
type: Input
|
|
3951
3960
|
}], buttonLabel: [{
|
|
3952
3961
|
type: Input
|
|
3962
|
+
}], multiSelect: [{
|
|
3963
|
+
type: Input
|
|
3953
3964
|
}], fileInput: [{
|
|
3954
3965
|
type: ViewChild,
|
|
3955
3966
|
args: ["fileInput", { read: ElementRef, static: true }]
|