Using jquery to trigger a file input/fake button

Question

So I got this button:

<button class="upload-button" type="button">Upload File</button>

which I'm using to cover this default input/browse button:

<input type="file" id="fileinput" name="uploads[]" multiple="multiple">

however when I'm using this script:

$('.upload-button').on('click', function (){
    $('#upload-input').click();
});

It does not seem to work, what i want to do is trigger the browse file after the fake button is clicked, i found another post on here where they said that this is because of the visibility of the file input is set to hidden, but when i tried to set it to default, it still did not work. What can the problem be here?

You sure you are pointing to the right input? like $('#fileinput'').click(); instead of $('#upload-input').click(); — Thum Choon Tat
– Thum Choon Tat, Commented Dec 8, 2016 at 10:10

4b0 · Accepted Answer · 2016-12-08 10:05:04Z

2

Use trigger :

 $('#upload-input').trigger( "click" );

answered Dec 8, 2016 at 10:05

4b0

22.4k30 gold badges97 silver badges143 bronze badges

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

1 Comment

Barmar Over a year ago

.click() is the same as .trigger('click')

Zakaria Acharki · Accepted Answer · 2016-12-08 10:08:14Z

0

Try to hit the DOM object instead :

$('#upload-input')[0].click();

NOTE : make sure that you've the id upload-input (looks like you need #fileinput instead).

Hope this helps.

$('.upload-button').on('click', function (){
  $('#fileinput')[0].click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="upload-button" type="button">Upload File</button> 
<input type="file" id="fileinput" name="uploads[]" multiple="multiple">

answered Dec 8, 2016 at 10:08

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Collectives™ on Stack Overflow

Using jquery to trigger a file input/fake button

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related