CODEWITHSUNDEEP
jqueryhtml
Rafael
Rafael

Reputation: 219

Open file via <a> click instead of <input>?

I'm new to front-end development, and I'm trying to open a file (an .xml file). I have a drop-down menu called File with the structure:

File:

I want that when I press the "Open" tab, the file select window appear so I can choose the file. I tried to put an <input type="file"> inside the <a> element like that:

<a href="#" onclick="openFile()"><input type="file">Open<a>

But a huge button appears next to it, and I don't want that to appear, I just want It behaviour.

Here is a little fiddle to show the scenario fiddle

Upvotes: 2

Views: 743

Answers (2)

AstroCB
AstroCB

Reputation: 12367

You could hide the input dialog and use JavaScript to select it once the link is clicked (I'm assuming that's what you were trying to do in the Fiddle):

function openFile() {
  document.querySelector("li input").click();
}
li input {
  visibility: none;
  width: 0;
}
<div class="btn-group" role="group" aria-label="...">
  <!--Button File-->
  <div class="btn-group" role="group">
    <button>File</button>
    <ul class="dropdown-menu" role="menu">
      <li>
        <input type="file" /><a href="#" onclick="openFile()">Open</a>
      </li>
      <li><a href="#">Save</a>
      </li>
    </ul>
  </div>
</div>

Fiddle, if you prefer.

Upvotes: 5

recursive
recursive

Reputation: 86084

The only way you can get an open file dialog is to use an <input type="file"> or a browser plugin. Assuming you want to avoid a plugin, that means you'll have to do some clever styling to change the appearance of the button. One technique is to position the button above the link, and make it almost completely transparent.

Upvotes: 2

Related Questions