How to remove selected file name at input type=“file” by function in angular 4?

Question

I'm new to Angular. I'm using below code to attach file from folder,

   <input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>

After selecting specific file the UI looks like the attached image

Now i'm trying to remove the selected file name with the default text "No file chosen" next of Choose File button like this image, when clicking some button

Can anyone suggest me an idea to achieve this? Thanks in advance.

Pardeep Jain · Accepted Answer · 2018-12-17 06:43:10Z

9

Just reset the value to empty for that element. Like below -

<input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>
<button type="button" (click)="reset(fileInput)">Reset</button>

reset(element) {
    element.value = "";
}

Working Example

answered Dec 17, 2018 at 6:43

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

1 Comment

Arul Over a year ago

alternatively we can do another method to avid the reset button ************** mainfunction($event.taget.value) { //Upload function logics here event.target.value = '' }); } ******************** like this you can reset after the upload functions was done

Himanshu · Accepted Answer · 2018-12-17 07:59:49Z

2

You can use ViewChild for this.

In your .ts declare viewchild like this =>

@ViewChild('fileInput')
  myVar1: any;

Inside reset method you can do like this =>

this.myVar1.nativeElement.value = '';

answered Dec 17, 2018 at 7:59

Himanshu

8651 gold badge13 silver badges22 bronze badges

Comments

Derviş Kayımbaşıoğlu · Accepted Answer · 2018-12-17 06:47:08Z

1

this is actually nothing with angular. It can be done with or without angular.

with Angular

<input #fileInput type="file"  />
<button type="button" (click)="fileInput.click()">trigger</button>
<button type="button" (click)="fileInput.value=''">Reset</button>

With JQuery

$('#fileId').value=''

with Pure JS

document.GetElementById('elementId').value = '';

answered Dec 17, 2018 at 6:47

Derviş Kayımbaşıoğlu

30.9k4 gold badges55 silver badges79 bronze badges

2 Comments

Pardeep Jain Over a year ago

Bro dont mix jQuery with Angular, when we have way with angular

Derviş Kayımbaşıoğlu Over a year ago

sure, I just wanted to point out that it is actually nothing more then DOM manipulation. but thank you

Collectives™ on Stack Overflow

How to remove selected file name at input type=“file” by function in angular 4?

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related