Refresh input type file

Question

I'm working on an Angular project.

When I import several documents I have the message "two documents". nothing problematic.

The problem arises when I press the delete button that I created. It allows to empty my list but to display there is always written "two documents"

I wish I had that. like when we get to the page for the first time ("no file selected") :

How could I do to reload this input without reloading the page?

My code :

html :

<div class="form-group">
          <label for="pj">Pièce jointe</label>
          <div fxLayout="row wrap" fxLayoutAlign="start center">
            <input type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>
            <button type="button" (click)="clearFile()" class="btn btn-link">
              <i class="fas fa-trash fa-lg"></i>
            </button>
          </div>
        </div>

ts :

 clearFile() {
 this.message.files = null;
 }

Thanks

https://stackoverflow.com/questions/9011644/how-to-reset-clear-file-input — epascarello, Mar 19 '20 at 15:10

score 2 · Accepted Answer · answered Mar 19 '20 at 15:20

If you use a reactive form, you can just call reset() on the form control.

component.html

<form [formGroup]="form">  
  <input type="file" multiple formControlName="files" />
  <button type="button" (click)="clearFile()">
    Delete
  </button>
</form>

component.ts

form: FormGroup;

ngOnInit() {
  this.form = new FormGroup({
    files: new FormControl('')
  });
}

clearFile() {
  this.form.get('files').reset();
}

DEMO: https://stackblitz.com/edit/angular-huvm38

score 0 · Answer 2 · answered Mar 19 '20 at 15:13

you can use ViewChild to access the input in your component. First, you need to add #someValue to your input so you can read it in the component:

<input #myInput type="file" name="pj" id="pj" (change)="onFileChange($event)" multiple>

Then in your component you need to import ViewChild from @angular/core:

import { ViewChild } from '@angular/core';

Then you use ViewChild to access the input from template:

// ng 8 @ViewChild('myInput', {static: false}) myInput: ElementRef;
@ViewChild('myInput') myInput: ElementRef;

Now you can use myInput to reset the selected file because it's a reference to input with #myInput, for example create method reset() that will be called on click event of your button:

reset() {
    console.log(this.myInput.nativeElement.files);
    this.myInput.nativeElement.value = "";
    console.log(this.myInput.nativeElement.files);
}

Refresh input type file

2 Answers2