Failed to set the 'value' property on 'HTMLInputElement'

When I try to assign my file blob to a File object it gives me the following error:

core.js:1448 ERROR Error: Uncaught (in promise): InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string. Error: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
​

I checked the content when I console.log() into it it does give me the content of the file. Why is it giving me the error when I try to assign it to examen_bestand?

HTML:

<input type="file" [(ngModel)]="examen_bestand" name="examen_bestand" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" (change)="fileChanged($event)">


TS:

export class StudentUploadComponent implements OnInit {
@Input() examensStudent: Examen[] = [];
examen_id: number;
examen_bestand: any;

constructor(private serv: ExamService) { }

onSubmit(form) {
console.log(form.values);
}

fileChanged(e) {
const reader = new FileReader();
reader.onload = () => {
this.examen_bestand = reader.result;
};
reader.readAsText(e.target.files[0]);
}

ngOnInit() {
this.serv.getExams().subscribe(data => this.examensStudent = data);
}

}

Continue reading...