CODEWITHSUNDEEP
javascriptjquery
Adib Aroui
Adib Aroui

Reputation: 5067

Open 'Choose file' window onclick on anchor link (Skip the click on 'Choose file' button)

I have an anchor a.add_input link which is responsable of adding (via jQuery) a file input field to the current document. The input is appended to a list of other file input fields (Multiple file uploads in the context of a OneToMany relationship).

The final result looks like this:

<input type="file" id="1" name="...">
<input type="file" id="2" name="...">
<input type="file" id="3" name="...">
<input type="file" id="4" name="...">
<a href="#" class="add_input">Add an input</a>

As you know, the file input field is rendered with a button that pops up a window. The window allows user to choose a file. I want to hide that button to end user and allow him to see the window directly after click on anchor. But I additionnally need that the file is linked to its specific input file(a server side code requires it).

I know that maybe I have two issues within this post, but I see them as one issue.

Can someone please correct me or give insights on how to do it? your help is much appreciated.

Upvotes: 0

Views: 4073

Answers (3)

casraf
casraf

Reputation: 21694

Don't need to go all fancy, you can simply use a <label>! 

<div>
    <label for="file">Click me</label>
    <input type="file" id="file" style="display: none" />
</div>

<div>
    or
    <label>Click me 2
        <input type="file" id="file2" style="display: none" />
    </label>
</div>

Upvotes: 3

Adam Jenkins
Adam Jenkins

Reputation: 55623

As @phts said, in IE the user has to interact directly with the element (you cannot trigger it programmatically). However, you can make the element invisible (via setting it's opacity to 0) and positioning it on top of an anchor tag (or anything) so it appears the user is clicking on a link, when in actual fact they are clicking on a file input (and thus the native file chooser dialog will be shown).

This is the common method to work around the problem you described. Below is an example (in the second div, I left the opacity of the input as 1 so you can see what's happening):

.container { position: relative; margin: 0 0 40px;}
.chooser { position: absolute; z-index: 1; opacity: 0; cursor: pointer;}
.chooser-2 { opacity:1;}
<div class="container">
  <input type="file" class="chooser">
  <a href="#">Click me to choose a file</a>
  </div>

<div class="container">
  <input type="file" class="chooser chooser-2">
  <a href="#">Click me to choose a file</a>
  </div>

Upvotes: 2

phts
phts

Reputation: 3925

Firefox, Chrome allow triggering click event on input file elements. In this case a native filechooser dialog will be shown.

IE (any versions) doesn't allow such behavior. IE allows choosing file only by user click on Browse button. So it is impossible to open a filechooser dialog on a separate anchor click directly.

Upvotes: 1

Related Questions