Angular 5 File Upload: Failed to Set the 'Value' Property on 'Htmlinputelement'

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

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

Angular 5 file upload: Failed to set the 'value' property on 'HTMLInputElement'

Like the error is saying, you can only set an empty string to a file input value to clear the selection. It could open security risks otherwise. I can't imagine how that code could've ever worked. Maybe in some non-standard (bad) browser?

Shouldn't that code work if you just remove the line, why do you need to set the same value to the input that it already has anyway?

Edit: seems a custom ValueAccessor is needed for validating file inputs. Solution in another answer: Angular2: validation for <input type="file"/> won't trigger when changing the file to upload

Angular 4 : File Upload : Failed to set the 'value' property on 'HTMLInputElement'

You can hold the file in a variable in ts file and when submitting form use it:-

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http'

selector: 'app-file-upload',
templateUrl: './file-upload.component.html'
export class FileUpload implements OnInit {

createQPForm: FormGroup;
fileHolder: File | null;

private _FormBuilder: FormBuilder,
private _HttpClient: HttpClient
) {
this.fileHolder = null;

ngOnInit() {
this.createQPForm ={
qpName: ['', [Validators.required]],
file: ['', [Validators.required]]

onFileChange(event) {
if ( && {
this.fileHolder =[0];

createQP() {
if (this.createQPForm.valid && this.fileHolder && {
const formData: FormData = new FormData();
formData.append('qpName', this.createQPForm.value.qpName);
formData.append('file', this.fileHolder,;
// use the formDat here

See the working stackblitz here.

failed to set the 'value' property on 'HTMLInputElement' in reactive form

You can rename your image file with this trick:

On your component.html, you add the event listener to listen to change:

<input type="file" (change)="onFileChange($event)" #file formControlName="imageName">

And on your component.ts, this will create a new file with the updated file name

onFileChange(event) {
var blob =[0].slice(0,[0].size, 'image/png');

const newFile = new File([blob], this.dat.imageName, {type: 'image/png'})

This maintains the original file name on input, but you can use newFile in your post/put request to be sent to the backend.

How to solve error TypeError: Cannot set property list of #HTMLInputElement which has only a getter?

That's because the "list" attribute is read-only and therefore you need to use the setAttribute function to set it/change it.

Try this:

const Input1 = document.createElement('input')
Input1.type = 'text'

Related Topics

Leave a reply