Use Jquery to click a hidden file upload button?

Question

I have a hidden file upload as it looks really bad, I have displayed a nicer looking button and would like it to click the hidden file upload when its clicked.

function ClickUpload() {
    $("#FileUpload").trigger('click');
}

<div id="MyUpload">
    <span id="FileName">Choose File</span>
    <input id="uploadButton" type="button" value="Upload" onclick="ClickUpload()"> 
</div>
<div id="hideUglyUpload">
    <input type="file" name="FileUpload" id="FileUpload"/>
</div>

So far i can move into the function ClickUpload() but it just passes through the click without the file selection window popup.

The only thing I can think of is on the same line as @A.Wolff 's comment... Perhaps some browsers will only initiate the file dialog when it is triggered by a user initiated event. Your trigger function is not user initiated so the browser might be blocking it. — Lix
– Lix, Commented May 12, 2014 at 15:07
@Lix AFAIK, older browser (chrome version?) doesn't allow it on hidden input, input needs to be put outside viewport. But as i can test it, now it works on chrome — A. Wolff
– A. Wolff, Commented May 12, 2014 at 15:09
When using .triggerhandler() you can check weather the click was triggered and if not, to display a normal input type=file: api.jquery.com/triggerhandler — Al.G.
– Al.G., Commented May 12, 2014 at 15:13

silverfighter · Accepted Answer · 2014-05-12 15:16:53Z

5

I prefer not to have inline JS function calls in markup ... so a little change...

   $(document).ready(function() {
      $('#uploadButton').on('click',function(evt){
         evt.preventDefault();
         $('#FileUpload').trigger('click');
     });
  });

<div id="MyUpload">
    <span id="FileName">Choose File</span>
    <input id="uploadButton" type="button" value="Upload"> 
</div>
<div id="hideUglyUpload">
    <input type="file" name="FileUpload" id="FileUpload"/>
</div>

answered May 12, 2014 at 15:16

silverfighter

6,89212 gold badges52 silver badges76 bronze badges

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

Comments

nicael · Accepted Answer · 2014-05-12 15:04:34Z

4

Strange that it doesn't work. Try

<input id="uploadButton" type="button" value="Upload" onclick='$("#FileUpload").click()'>

answered May 12, 2014 at 15:04

nicael

19.1k13 gold badges65 silver badges93 bronze badges

2 Comments

Lix Over a year ago

What's the difference between this and the OP's method?

Safeena Over a year ago

I do the same code and write ajax method in the upload click.but here the function working two times.Have any solution?

Collectives™ on Stack Overflow

Use Jquery to click a hidden file upload button?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related