Bob Horn Bob Horn - 4 months ago 5x
Javascript Question

Want a Button But Have to Use Input Where Type=File?

I have an Import button that I want to look like this:

enter image description here

The HTML for that looks like this:

<button on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();">Import</button>

However, because I want the button to open a file, my research shows I need to use an input control and it looks like this:

enter image description here

Here is the HTML for it:

<input type="file" on-read-file="importTasks(contents)" class="btn btn-default" ng-click="importTasks();"></input>

I don't need the input box, and I don't need a button to say browse. I want the functionality of the second option, with the look of the first. Is that possible?


Yes but you will need to use javascript. Make the file input hidden and then make the button click activate it like so

 <input id="files" type="file" style="display:none"/>
 <button id="upload" type="button"> </button>
    $('#upload').click(function() {