I am looking to incorporate an image file into my "convert" function.
Here is the code snippet from my component.html for the input:
<li>
<label for="avatarIMG" id="avatarLbL"> image: </label>
<input type="file" accept="image/*" #imageBox name="image" id="avatarinput" (change)="convert($event)">
<button type="button" id="avatarInputBTN" (click)="imageBox.click()"> Profile Picture </button>
</li>
The objective is to transmit the values of the object along with the image file captured from the form to the component.ts. Below is the relevant code:
public convert(e: Event): void {
this.eventFiles = (e.target as HTMLInputElement).files[0];
if (this.eventFiles !== null) {
this.user.image = this.eventFiles;
const fileReader = new FileReader();
fileReader.onload = args => this.preview = args.target?.result?.toString();
fileReader.readAsDataURL(this.eventFiles);
}
}
An error message indicating 'object possibly null' arises when trying to access (e.target as HTMLInputElement).files[0]. How can I address this issue?..