I am in the process of developing a component that includes a file picker for uploading files to our CDN. I am working on integrating a reactive form into this component to validate the image input, allowing me to verify against file name and extension among other criteria. By encapsulating it within a form, I can leverage Angular's validation capabilities.
The HTML code for my component is as follows:
<form class="mt-4" [formGroup]="form">
<div class="form-group form-inline">
<label class="btn btn-secondary btn-file">Browse
<input name="file" type="file" (change)="onChange($event)" formControlName="imageInput"
</label>
<p *ngIf="file" class="pl-4 align-middle mb-0">{{file.name}}</p>
</div>
<button type="button" class="btn btn-primary">Upload</button>
</form>
As for the code behind the component:
onChange(event: EventTarget) {
// File picker logic
this.form = this.formBuilder.group({
imageInput: [this.file.name, CustomValidators.imageValidator]
});
}
The CustomValidators.imageValidator currently just logs the input value.
Upon loading the component, an error message is displayed:
ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.In essence, my goal is to utilize the file input within my reactive form to perform validations based on the filename.