Search code examples
javascriptangularinput-type-file

Fire onchange event on input type file programmatically

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)" />
Solution

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