How to reset selected file with input tag file type in Angular 2?

Question

This is how my input tag looks like:

<input type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
<button>Reset</button>

I want to reset the selected file in Angular 2. Help would be greatly appreciated. Let me know if you need more details.

P.S.

I could get file details from $event parameters and save it in a typescript variable, but this variable is not bound to the input tag.

When you say reset, what exactly do you mean. Can you create a http://plnkr.co/ and post what problem are you facing — abhinav, Oct 20 '16 at 22:24

score 284 · Accepted Answer · edited Sep 16 '20 at 18:45

284

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" placeholder="File Name" name="filename" (change)="onChange($event)">

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:

@ViewChild('myInput')
myInputVariable: ElementRef;

Now you can use myInputVariable 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.myInputVariable.nativeElement.files);
    this.myInputVariable.nativeElement.value = "";
    console.log(this.myInputVariable.nativeElement.files);
}

First console.log will print the file you selected, second console.log will print an empty array because this.myInputVariable.nativeElement.value = ""; deletes selected file(s) from the input. We have to use this.myInputVariable.nativeElement.value = ""; to reset the value of the input because input's FileList attribute is readonly, so it is impossible to just remove item from array. Here's working Plunker.

edited Sep 16 '20 at 18:45

Marco

1,073
9
22

answered Oct 20 '16 at 22:28

Stefan Svrkota

48,787
9
98
87

2

is this enough to clear value`this.myInputVariable.nativeElement.value = "";` ?/ – Pardeep Jain Apr 07 '17 at 07:35
1

@PardeepJain Yes, this clears selected file from file input if that's what you're looking for. – Stefan Svrkota Apr 07 '17 at 07:42
3

`myInputVariable` is indeed of type `ElementRef` – phil294 Nov 02 '17 at 23:09
What if I have a variable number of "input type=file", so that the ids are dynamically generated? – Albert Hendriks Aug 17 '18 at 09:41
2

in angular 8 @ViewChild('delDocModal', {static: false})delDocModal: ElementRef; – Aug 02 '19 at 07:33
Specifying the type of the ViewChild as ElementRef will help you using it properly. – Didier Corronel Apr 01 '20 at 10:19

2Toad · Answer 2 · 2021-06-15T00:55:15.043

36

I typically reset my file input after capturing the selected files. No need to push a button, you have everything required in the $event object that you're passing to onChange:

onChange(event) {
  // Get your files
  const files: FileList = event.target.files;

  // Clear the input
  event.target.value = null;
}

Different workflow, but the OP doesn't mention pushing a button is a requirement.

*UPDATED 6/14/2021 to replace event.srcElement with event.target, now that srcElement has been deprecated

edited Jun 15 '21 at 00:55

answered Mar 23 '18 at 06:55

2Toad

14,799
7
42
42

srcElement has been deprecated. – Fors Jun 14 '21 at 21:33
Very nice approach. The only downside is now that user is allowed to select same file over and over again – Rodrigo Borba Jul 11 '21 at 20:51
1

@RodrigoBorba you can prevent that by replacing `const files` with something like `this.files` and then checking `this.files` to see if the file already exists. Really up to how you want to work with the files after getting them – 2Toad Jul 12 '21 at 03:51
You're right. But I thought it would worth to be pointed :) – Rodrigo Borba Jul 13 '21 at 03:46
`(target).value = null;` works for me – nikiphoros Jan 07 '23 at 09:35

Admir · Answer 3 · 2018-06-28T19:29:37.653

28

Angular 5

html

<input type="file" #inputFile>

<button (click)="reset()">Reset</button>

template

@ViewChild('inputFile') myInputVariable: ElementRef;

reset() {
    this.myInputVariable.nativeElement.value = '';
}

Button is not required. You can reset it after change event, it is just for demonstration

edited Jun 28 '18 at 19:29

answered Mar 01 '18 at 19:16

Admir

2,876
1
19
19

Edmar Miyake · Answer 4 · 2016-10-20T22:34:50.200

16

One way to achieve it is to wrap your input in <form> tag and reset it.

I'm not considering attaching thr form to NgForm or FormControl either.

@Component({
  selector: 'form-component',
  template: `
    <form #form>
      <input type="file" placeholder="File Name" name="filename">
    </form>
    <button (click)="reset()">Reset</button>
`
})
class FormComponent {



  @ViewChild('form') form;


  reset() {
    this.form.nativeElement.reset()
  }
}

https://plnkr.co/edit/Ulqh2l093LV6GlQWKkUA?p=preview

edited Oct 20 '16 at 22:34

answered Oct 20 '16 at 22:24

Edmar Miyake

12,047
3
37
38

can we use `.reset()` method on viewChild ?? – Pardeep Jain Apr 07 '17 at 07:32
Hello Edmar ... can you help me out with the question on this link ...https://stackoverflow.com/questions/48769015/filter-in-the-dropdown-not-working-with-data-from-http-get-request – Heena Feb 13 '18 at 15:12

Oleg Mazko · Answer 5 · 2017-06-20T07:43:41.967

Short version Plunker:

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

@Component({
  selector: 'my-app',
  template: `
      <input #myInput type="file" placeholder="File Name" name="filename">
      <button (click)="myInput.value = ''">Reset</button>
  `
})
export class AppComponent {


}

And i think more common case is to not using button but do reset automatically. Angular Template statements support chaining expressions so Plunker:

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

@Component({
  selector: 'my-app',
  template: `
      <input #myInput type="file" (change)="onChange(myInput.value, $event); myInput.value = ''" placeholder="File Name" name="filename">
  `
})
export class AppComponent {

  onChange(files, event) {
    alert( files );
    alert( event.target.files[0].name );
  }

}

And interesting link about why there is no recursion on value change.

score 3 · Answer 6 · answered Feb 15 '18 at 12:49

3

I think its simple, use #variable

<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event); variable.value='' ">
<button>Reset</button>

"variable.value = null" option also available

answered Feb 15 '18 at 12:49

Fawad Mukhtar

780
5
9

score 3 · Answer 7 · answered Apr 07 '20 at 05:43

you may use template reference variable and send to a method

html

<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event, variable);">

component

onChange(event: any, element): void {
    // codes
    element.value = '';
  }

score 2 · Answer 8 · answered Jul 29 '20 at 11:12

In my case I did it as below:

 <input #fileInput hidden (change)="uploadFile($event.target.files)" type="file" />
 <button mat-button color="warn" (click)="fileInput.value=''; fileInput.click()"> Upload File</button>

I am resetting it using #fileInput in HTML rather than creating a ViewChild in component.ts . Whenever the "Upload File" button is being clicked, first it resets the #fileInput and then triggers #fileInput.click() function. If any separate button needed to reset then on click #fileInput.value='' can be executed.

score 1 · Answer 9 · answered Aug 21 '20 at 05:55

I am using a a very simple aproach. After a file has been uploaded, i shortly remove the input control, using *ngIf. That will cause the input field being removed from the dom and re-added, consequencely it is a new control, and therefore it is emply:

showUploader: boolean = true;

async upload($event) {
  await dosomethingwiththefile();
  this.showUploader = false;
  setTimeout(() =>{ this.showUploader = true }, 100);
}

<input type="file" (change)="upload($event)" *ngIf="showUploader">

score 0 · Answer 10 · edited Mar 29 '19 at 07:00

If you are facing issue with ng2-file-upload,

HTML:

<input type="file" name="myfile" ` **#activeFrameinputFile** `ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

component

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@ViewChild('`**activeFrameinputFile**`') `**InputFrameVariable**`: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {
    this.`**InputFrameVariable**`.nativeElement.value = '';
   };

score 0 · Answer 11 · answered Feb 23 '19 at 17:54

0

template:

<input [(ngModel)]="componentField" type="file" (change)="fileChange($event)" placeholder="Upload file">

component:

fileChange(event) {
        alert(this.torrentFileValue);
        this.torrentFileValue = '';
    }
}

answered Feb 23 '19 at 17:54

Hett

3,484
2
34
51

score 0 · Answer 12 · answered Jun 04 '19 at 10:04

I have add this input tag into form tag..

 <form id="form_data">
  <input  type="file" id="file_data"  name="browse"
  (change)="handleFileInput($event, dataFile, f)"  />
</form>

I angular typescript, I have added below lines, get your form id in document forms and make that value as null.

    for(let i=0; i<document.forms.length;i++){
      if(document.forms[i].length > 0){
             if(document.forms[i][0]['value']){ //document.forms[i][0] = "file_data"
                 document.forms[i][0]['value'] = "";
              }
      }
    }

Print document.forms in console and you can get idea..

score -1 · Answer 13 · answered May 09 '19 at 08:04

-1

<input type="file" id="image_control" (change)="validateFile($event)" accept="image/gif, image/jpeg, image/png" />

validateFile(event: any): void {
    const self = this;
    if (event.target.files.length === 1) {
      event.srcElement.value = null;
    }
  }

answered May 09 '19 at 08:04

Mayur Sakariya

1

1

can you provide a short description on your code explains how it works? – Jacob Nelson May 09 '19 at 08:08
As per MDN this have a poor support. For reference check this URL https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement @JacobNelson – Mohammed Gadi Aug 07 '19 at 02:24

How to reset selected file with input tag file type in Angular 2?

13 Answers13

Linked