Fire onchange event on input type file programmatically

Question

I have project written in Angular and I want to style input type file. So in the Internet I have found solution that I have to hide input type file and call its event programmatically. But below code doesn't to work:

   <input type="button" id="addImgFile" value="Add file" 
onclick="var addImgFile = document.getElementById('addImgFile'); var event = new Event('change'); addImgFile.dispatchEvent(event);" />
    <input type="file" name="avatar" id="addImgFile" style="display:none;" 
(change)="onFileChange($event)" />

ramzan ali · Accepted Answer · 2020-07-12 15:56:46Z

1

Instead of using another input you could use label to get your desire style. Here is an example

edited Jul 12, 2020 at 15:56

answered Jul 12, 2020 at 5:59

ramzan ali

5214 silver badges15 bronze badges

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

Comments

alexvdvalk · Accepted Answer · 2020-07-12 06:39:25Z

0

In Angular, you should use the ViewChild property dectorator to access to the element. You can then manually execute any method you need from your typescript file. Here is a basic example: https://stackblitz.com/edit/angular-nfdvsr

answered Jul 12, 2020 at 6:39

alexvdvalk

1,2646 silver badges10 bronze badges

Comments

andsilver · Accepted Answer · 2020-07-12 16:04:03Z

0

<input type="button" id="addImgFile" value="Add file" (click)="onAddFile()" />
<input #file type="file" name="avatar" id="addImgFile" style="display:none;" 
(change)="onFileChange($event)" />

@ViewChild('file', { static: true })
private file: ElementRef;

onAddFile() {
   // manually click the file element
   this.file.nativeElement.value = null;
   this.file.nativeElement.click();
}

answered Jul 12, 2020 at 16:04

andsilver

6,0323 gold badges22 silver badges50 bronze badges

1 Comment

andsilver Over a year ago

@Robert, nice !!

Anoop Sharma · Accepted Answer · 2020-07-13 00:41:35Z

0

Not quite clear what you want to achieve, but if you just want to hide the input field in beginning and show it only on click of "add file" button then you can try changing button's event as per below code.

<input type="button" id="addImgFile" value="Add file" onclick="var addImgFile = document.getElementById('addImgFile1'); var event = new Event('change'); addImgFile.dispatchEvent(event);" />

<input type="file" name="avatar"  id="addImgFile1" style="display:none;" onchange=" event.target.style=''; event.target.click()" />

edited Jul 13, 2020 at 0:41

answered Jul 12, 2020 at 4:10

Anoop Sharma

514 bronze badges

3 Comments

Robert Over a year ago

I wanted to fire input type file click, not only to hide it, but thanks for response :)

Anoop Sharma Over a year ago

Edited answer, which could serve the your purpose.

Anoop Sharma Over a year ago

Please check now

Collectives™ on Stack Overflow

Fire onchange event on input type file programmatically

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related