Open file via click instead of ?

Question

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:

Open
Save

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

possible duplicate of [Styling an input type="file" button](http://stackoverflow.com/questions/572768/styling-an-input-type-file-button) — aug, Apr 26 '15 at 22:11
Aug, I'm not sure if It is duplicated What I want is something like www.draw.io — Rafael, Apr 26 '15 at 22:17

score 5 · Accepted Answer · answered Apr 26 '15 at 22:17

5

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.}

answered Apr 26 '15 at 22:17

AstroCB

12,337
20
57
73

AstroCB, yes, It is exactly what I want. I'm also new to stackoverflow. So Should I mark you comment as the one that solved my problem or Should I mark as already have an answer as the guy called "AUG", said in the comment above? – Rafael Apr 26 '15 at 22:24
@Rafael If my answer solved your problem, feel free to mark it as accepted. However, [it's up to you](http://stackoverflow.com/help/accepted-answer). – AstroCB Apr 26 '15 at 22:25

score 2 · Answer 2 · answered Apr 26 '15 at 22:10

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.

Open file via click instead of ?

2 Answers2