triggering a file input button

Question

I have the following situation:

<input id="upload_trigger_btn" type="file" name="files[]" multiple>
<a type="submit" class="button-normal-12px-ffffff" href="#"><span>Add files</span></a>

$(".add_files_btn").bind("click", function () {
    $("#upload_trigger_btn").trigger("click");
});

So basically i want to trigger the file input button using another. This works great in firefox and IE but the button doesn't get triggered in chrome and safari.

The last time I tried to accomplish this, I found that it isn't possible to manually trigger that dialog in chrome and safari. It's been a while since then, so maybe someone else has come up with a solution to it. — Kevin B, Jan 23 '12 at 19:39
The last time i tried it, i ended up making the buttons invisible and placing them on top of the button that needed to trigger it so that it would look like you were clicking on your fancy button, but you were actually clicking on the file input. — Kevin B, Jan 23 '12 at 20:02

score 4 · Answer 1 · answered Feb 04 '13 at 02:06

4

You can make {'visibility':'hidden'} with height: 0px and display block, trigger would work with it.

answered Feb 04 '13 at 02:06

MZH

1,414
4
29
57

score 1 · Answer 2 · edited May 23 '17 at 10:28

1

EDIT

In most cases you can trigger an event like this:

$(".add_files_btn").click(function(){
    $("#upload_trigger_btn").click();
});

But when it comes to file upload buttons, a few browsers (including firefox) do not allow the action because it poses a security risk. Unfortunately, there does not appear to be a simple fix with a click function...

Reference -> https://stackoverflow.com/a/3030174/992435

edited May 23 '17 at 10:28

Community

1
1

answered Jan 23 '12 at 19:51

VictorKilo

1,839
3
24
39

Apparently it is not possible with file fields. As I understand it, it is a security risk and a couple of browsers do not allow it. The code I posted originally DID work in chrome, but not in FF. – VictorKilo Jan 23 '12 at 20:06
1

It does seem to be possible, but you cant use display:none on the file field if you want to trigger it. When you use visibility:hidden it does work. – vincent Jan 23 '12 at 20:12

score 1 · Accepted Answer · answered Jan 23 '12 at 19:53

1

I think you could get away with:

$(".add_files_btn").unbind("click").bind("click", function () {
   $("#upload_trigger_btn").click();
});

answered Jan 23 '12 at 19:53

IamDeveloper

5,156
6
34
50

is 'upload_trigger_btn' control visible? – IamDeveloper Jan 23 '12 at 19:59
And that seemed to be the problem, changed from display:none to visibility:hidden and now it gets triggered. – vincent Jan 23 '12 at 20:05
Oh sorry, didnt know you war the original poster of the answer, but its definitly accepted, and ty very much for your help – vincent Jan 23 '12 at 20:30

score -2 · Answer 4 · answered Apr 20 '16 at 13:28

      <div class="btn btn-default fileinput-button ">
      <span><i class="fa fa-cloud-upload pr-10" aria-hidden="true"></i>UPLOAD FILE</span>  
       <input id="fileupload5" type="file">
      </div>

.fileinput-button input { position: absolute; top: 0; right: 0; margin: 0; opacity: 0; -ms-filter: 'alpha(opacity=0)'; font-size: 200px; cursor: pointer; }

triggering a file input button

4 Answers4

EDIT

Linked