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

Question

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);
  }

}

Answer 1

I was getting this error, and just got it resolved. At least for me it was because on my input I had a 'value' in the input field set to this.state.image like this:

          <label htmlFor='image'>
                    Image
                    <input 
                        type='file' 
                        id='file' 
                        name="file"
                        placeholder="Upload an Image" 
                        required 
                        value={this.state.image}
                        onChange={this.uploadFile}
                        />
                </label>

After I removed the line of value={this.state.image}

it started working.

Hope this helps.

Answer 2

Remove ngModel. Here is a stackblitz you likely don't need at this point. :)