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

stackoverflow.com/questions/9011644/…

epascarello
– epascarello

2020-03-19 15:10:34 +00:00
Commented Mar 19, 2020 at 15:10 — epascarello
– epascarello, Commented Mar 19, 2020 at 15:10

Kurt Hamilton · Accepted Answer · 2020-03-19 15:20:44Z

2

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

answered Mar 19, 2020 at 15:20

Kurt Hamilton

13.7k1 gold badge28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Reza · Accepted Answer · 2020-03-19 15:13:08Z

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

Collectives™ on Stack Overflow

Refresh input type file

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related