Using reactive form validation with <input type="file"> for an Angular app

Question

I'm writing a component with a file picker that uploads a file to our CDN. I'm trying to add a reactive form on this component to validate the image input, so I can check against file name/extension etc, and keep it wrapped it in a form so I can keep the benefits of Angulars validation.

My component HTML is

<form class="mt-4" [formGroup]="form">
  <div class="form-group form-inline">
    <label class="btn btn-secondary btn-file">Browse
       <input name="file" type="file" (change)="onChange($event)" formControlName="imageInput"
    </label>

    <p *ngIf="file" class="pl-4 align-middle mb-0">{{file.name}}</p>
  </div>

  <button type="button" class="btn btn-primary">Upload</button>
</form>

And my component code behind is

onChange(event: EventTarget) {
  // file picker code

  this.form = this.formBuilder.group({
      imageInput: [this.file.name, CustomValidators.imageValidator]
  });
}

The CustomValidars.imageValidator only just logs the input at the minute.

When the component is loaded, the error message displays as ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Basically, I want to use the file input in my reactive form, so I can validate against the filename.

This issue is still probably open: github.com/angular/angular.io/issues/3466 — lbrahim
– lbrahim, Commented May 23, 2017 at 14:23
Check my answer here for a full working example + explanation — S. Robijns
– S. Robijns, Commented Aug 17, 2017 at 10:56

Styx · Accepted Answer · 2017-09-27 18:31:18Z

As @ibrahim mention it's not implemented yet, but i got the same problem and solved it using hidden field. on onFileChange method set file.name to hidden field, where you can validate.

   <form class="mt-4" [formGroup]="form">
      <div class="form-group form-inline">
        <label class="btn btn-secondary btn-file">Browse
           <input name="file" type="file" (change)="onFileChange($event)">
           <input type="hidden" name="fileHidden" formControlName="imageInput"/> <!-- Validation Field -->
        </label>

        <p *ngIf="file" class="pl-4 align-middle mb-0">{{file.name}}</p>
      </div>
      <button type="button" class="btn btn-primary">Upload</button>
    </form>



onFileChange($event) {
     let file = $event.target.files[0]; // <--- File Object for future use.
     this.form.controls['imageInput'].setValue(file ? file.name : ''); // <-- Set Value for Validation
}
fileName = '';
this.form = this.formBuilder.group({
      imageInput: [fileName, Validators.required]
});

Nice solution (I also added the file file input as a control so that I could add validation messages)

s4suryapal · Accepted Answer · 2020-06-19 14:52:09Z

4

The value of <input type="file"> is read-only, You need to set the option emitModelToViewChange:false when calling setValue() to avoid that error :

ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

SOLUTION :

this.form.get('<name>').setValue(file, {emitModelToViewChange: false});

answered Jun 19, 2020 at 14:52

s4suryapal

1,9781 gold badge18 silver badges28 bronze badges

1 Comment

Praveen Kumar Dec 5, 2024 at 19:35

Thanks @s4suryapal, even after 4 years this one is the code which saved me. thanks

Abhishek · Accepted Answer · 2018-10-19 17:51:56Z

3

export class myClass implements OnInit {

  myForm = new FormGroup({
    name: new FormControl(''),
    myFile: new FormControl('')
  })

  onFileChange($event) {

    this.myForm.patchValue({
      myFile: $event.target.files[0]
    })
  }

}

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

answered Oct 19, 2018 at 17:51

Abhishek

391 bronze badge

1 Comment

Sunil Over a year ago

Add some context of answer.

Aman Jha · Accepted Answer · 2022-01-15 09:19:12Z

-1

Remove formControlName="imageInput" from your <input type="file" and this will solve your problem.

answered Jan 15, 2022 at 9:19

Aman Jha

5528 silver badges8 bronze badges

Collectives™ on Stack Overflow

Using reactive form validation with <input type="file"> for an Angular app

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Linked

Related