Why $('#file-input').click() does not open file input dialog when called in browser console?

Question

I found this fiddle: http://jsfiddle.net/QVAC7/ which help me to open the file input dialog. The idea is simple:

HTML:

<button id="id">Open</button>
<input id="yourinputname" type="file" name="yourinputname" style="display: none;" />

JS:

$('#id').on('click', function() {
    $('#yourinputname').trigger('click');
});

The code works fine, when I click the button, a dialog showed up.

But there is a strange thing that when I enter the same command to the Chrome console, the dialog did not show up.

$('#yourinputname').trigger('click');

he dialog did not show up

Is there any reason for this?

@David, wow that's strange. I tried this with Chrome 39 on OS X and Windows and it doesn't work. What browser/version/environment are your? — Tony Dinh
– Tony Dinh, Commented Dec 3, 2014 at 2:12

Edward Coyle Jr. · Accepted Answer · 2014-11-28 03:49:14Z

2

If you're using the console to try and find the jQuery object associated with $('#yourinputname') inside the JSFiddle, you won't find it because the JSFiddle's "Result" section is located inside an iFrame, which contains this code's "Result" in a secondary document outside the scope of the JSFiddle app.

You won't be able to run code from the console in this manner until you take the important code from this Fiddle, insert it into a page somewhere, and run it yourself.

answered Nov 28, 2014 at 3:49

Edward Coyle Jr.

4452 silver badges13 bronze badges

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

5 Comments

Mat J Over a year ago

If you look close enough, the screenshot shows the input element is in fact returned by the statement.

Edward Coyle Jr. Over a year ago

@Matthew, I'm not sure if his screenshot is actually reflecting the Fiddle, or if he actually added it to his page and took a screenshot of that. If you goto the JSFiddle page and try typing $('#yourinputname') into the console, you get a NULL result.

Mat J Over a year ago

But I guess he won't take a screenshot of a working console output and label "nothing happens". So just wondering if this is the actual cause.

Tony Dinh Over a year ago

@EdwardCoyleJr. I know about JSFiddle uses iframes, and I did not run the code inside the JSFiddle page. That screenshot was taken when I run the code in my page (I created a simple HTML file with jQuery, and run the code in console, you can try it yourself). Do you have any idea?

Ignitor Over a year ago

Just for completeness: it is possible to run console code on jsFiddle. You just have to select the "result( fiddle.jshell.net/ )" frame in the drop down (stating "<top frame>" in the screenshot)

Collectives™ on Stack Overflow

Why $('#file-input').click() does not open file input dialog when called in browser console?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related