How to trigger jquery input file?

Question

I am trying to trigger input tag to select a file by a button click though jquery. code example like the following

<input type="file" id="input_file"/>

<button onclick="select_file()"/>

function select_file() {
${'input_file').select("http://www.someimage.com/image.gif");
}

After hours of research, I still have not got the solution how I could make this happen.

Appreciate for any suggestion or solution

Thanks you

the file input type is used to select file from local file system... — Arun P Johny, Mar 26 '14 at 14:58
Your selector is wrong..you have a curly brace where you need a parenthesis — tymeJV, Mar 26 '14 at 14:58
@ArunPJohny is correct. Are you trying to upload a file from the user's computer or are you having the user select an image available online (and then want to upload that image)? — Backpackcoder, Mar 28 '14 at 15:12

score 1 · Answer 1 · edited May 23 '17 at 11:58

1

I was going to suggest:

$("#input-file").trigger("click");

but then I remembered there are security restrictions which prevent triggering and setting the values of file input dialogs.

There are some ways around it though, take a look at this question: https://stackoverflow.com/a/3030174/992435

edited May 23 '17 at 11:58

Community

1
1

answered Mar 26 '14 at 15:21

ChaoticNadirs

2,280
2
20
27

bcarn · Answer 2 · 2014-03-26T23:27:48.760

0

You should use

<input type="hidden" id="input_file"/>
<button onclick="select_file()"/>

function select_file() {
 $('input_file').val("http://www.someimage.com/image.gif");
}

The input type of file is used mainly for local file system files.

EDIT: Sorry about the typos

edited Mar 26 '14 at 23:27

answered Mar 26 '14 at 15:04

bcarn

133
6

1

This `${'` should be `$('`. Missed quote, too: `file" />` – Al.G. Mar 26 '14 at 15:11
Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programatically set to the empty string. ? – user2625363 Mar 26 '14 at 16:01

alexdmejias · Answer 3 · 2014-03-26T16:51:16.450

0

There were a couple of things wrong with your snippet. You were not using script tags, you had forgotten the '#' before ID selectors and you had a curly bracket after the dollar sign.

<input type="file" id="input_file/>

<button onclick="select_file()"/>
<script>    
function select_file() {
    $('#input_file').select("http://www.someimage.com/image.gif");
}
</script>

Although the way you are approaching your problem technically works, I would never recommend it since it can lead to unmaintainable code. A better approach would be something like:

<input type="file" id="input_file/>

<button class="changeInputButton" />
<script>    
$('.changeInputButton').on('click', function () {
  $('#input_file').val("http://www.someimage.com/image.gif");
});
</script>

edited Mar 26 '14 at 16:51

answered Mar 26 '14 at 15:07

alexdmejias

1,399
4
19
34

Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programatically set to the empty string. ??? – user2625363 Mar 26 '14 at 16:00
@user2625363 well I'm not sure what you are trying to accomplish. The warning you are getting is telling you that you can't select a random file in the system file of the user programmatically as it would be a huge security concern – alexdmejias Mar 26 '14 at 16:53

score 0 · Answer 4 · answered Mar 26 '14 at 15:12

You have typos in your codes... correct as follows;

<input type="file" id="input_file"/>

<button onclick="select_file()"/>

function select_file() {

   $('#input_file').val("http://www.someimage.com/image.gif");

}

Use Val in place of Select
You missed a # sign in the function
You missed a quote in the file input tag
You used a curly brace instead of a bracket

How to trigger jquery input file?

4 Answers4