Change Detection Doesnt Work With File Upload

I have a Angular 8 application and I have a form. But I want to detect a change when a user selects a new image. But nothing happened Googled, following tutorials. So this is the h

Solution 1:

I think the this.form.controls.picture.setValue( base64Img ); will override your image property in form and mark it as dirty.

Maybe you can prevent this by checking if base64Img is the same like your actual picture value.

(The same with UploadPicture)

Solution 2:

You might need to use reader.onload event like this

<input
    #file
    type="file"
    accept="image/*"
    (change)="previewImage($event)"
/>

Then in your component

public previewImage(event) {
        const reader = new FileReader();
        const file = event.target.files[0];
        reader.readAsDataURL(file);

        reader.onload = _event => {
            // need to run CD since file load runs outside of zone
            // do something else
            this.cd.markForCheck();
        };