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. — user400654
– user400654, Commented Jan 23, 2012 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. — user400654
– user400654, Commented Jan 23, 2012 at 20:02

MZH · Accepted Answer · 2013-02-04 02:06:53Z

4

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

answered Feb 4, 2013 at 2:06

MZH

1,5764 gold badges31 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

IamDeveloper · Accepted Answer · 2012-01-23 19:53:58Z

1

I think you could get away with:

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

answered Jan 23, 2012 at 19:53

IamDeveloper

5,2546 gold badges38 silver badges50 bronze badges

3 Comments

IamDeveloper Over a year ago

is 'upload_trigger_btn' control visible?

vincent Over a year ago

And that seemed to be the problem, changed from display:none to visibility:hidden and now it gets triggered.

vincent Over a year ago

Oh sorry, didnt know you war the original poster of the answer, but its definitly accepted, and ty very much for your help

Community · Accepted Answer · 2017-05-23 10:28:54Z

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

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

rubennotv · Accepted Answer · 2016-04-20 13:28:25Z

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

Collectives™ on Stack Overflow

triggering a file input button

4 Answers 4

Comments

3 Comments

EDIT

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

EDIT

2 Comments

Comments

Linked

Related