In JavaScript can I make a "click" event fire programmatically for a file input element?

Question

I'd like to make a click event fire on an <input type="file"> tag programmatically.

Just calling click() doesn't seem to do anything or at least it doesn't pop up a file selection dialog.

I've been experimenting with capturing events using listeners and redirecting the event, but I haven't been able to get that to actually perform the event like someone clicked on it.

Magalymagan

The click event you trigger must be called within a click event started by the user, or it won't work. – Jacquettajacquette

Answer 1

You cannot do that in all browsers, supposedly IE does allow it, but Mozilla and Opera do not.

When you compose a message in GMail, the 'attach files' feature is implemented one way for IE and any browser that supports this, and then implemented another way for Firefox and those browsers that do not.

I don't know why you cannot do it, but one thing that is a security risk, and which you are not allowed to do in any browser, is programmatically set the file name on the HTML File element.

Spyglass

Drat. Well I certainly understand that it's exploitable. Is this documented anywhere? I guess it would be implemented by each browser? – Magalymagan

Updated my answer to be more correct than previous answer - the gist is the same, but clarification should help a bit. This guy ran into the same problem: bytes.com/forum/thread542877.html – Spyglass

Yeah but Chrome does not seem to allow click() :( – Roddy

Chrome did accept click() and open the dialog (we've been using it for several months) until the most recent stable release of Chrome. :( – Viniferous

To clarify above comment: Chrome recently changed to check whether the file input element is visible. Triggering the click method works, including in the console, if the element can be seen. – Viniferous

Works in Chrome when invisible as well now. Not if it's in an iframe though. – Integrated

in FF it works, I've been using this trick since ages and it works. A little tip: dont use click() because this shitty method is IE legacy and it doesn't work, I always use new MouseEvent / dispatchEvent – Edmondedmonda

Guys, this is the wrong answer. Yes, you can do it. I added another answer with a link to a very short article. My answer is actually at the very end of this long list of unclear explanations. Well, life is harsh with correct and true answers sometimes. – Schleswig

@Schleswig - dude, this answer (the one you're saying is wrong) is 10 years old - no surprise it's not correct! (I don't know for sure, I'm taking your word for it). :P – Spyglass

Answer 2

I have been searching for solution to this whole day. And these are the conclusions that I have made:

1. For the security reasons Opera and Firefox don't allow to trigger file input.

2. The only convenient alternative is to create a "hidden" file input (using opacity, not "hidden" or "display: none"!) and afterwards create the button "below" it. In this way the button is seen but on user click it actually activates the file input.

   Upload File

Unscreened

this solution works great. Not sure why it's been overlooked and un-uprated. It's not *exactly what the question asks for, but it's a great work around. Have you found it to be incompatible with any browsers? I don't have the time to work my way through all 10+ flavors of relevant ones to test on. – Ciprian

Nice solution. Works on android mobile browser too. – Laynelayney

Thanks for that! We used similar approach but not working correcly in IE... Outer div overflow: hidden; and input font-size: 50px; styles make it working for me! – Incalculable

thanks worked for me 2, you can hide the file input by wrapping it with a div width/height = 0/0 and overflow hidden. – Stepfather

This is not true, See Didier's response below. The programmatic click must come from user action context - like in click handler of another button. Then it works fine, no need to have overflow element. – Backache

There's a minor typo in the input's style: it should be filter:alpha(opacity=0);. – Moulton

Unfortunately this doesn't work when a button-element is used. – Wertz

Nice vodoo trick my friend. I was using a primefaces file upload component hidden away in some dark corner of the page because the default look and feel just looked to bad on our portal page, and was clicking the file upload through a iconized button that look part of the standard stlye. Working fine on IE and Firefox (older version because of selenium driver). But on chrome, no chance. the jquery().click() did not open. Your suggestion is just perfect. many thanks. – Kirtley

Only problem I had was this, is that when the input changed, for some reason it became visible again (oh IE7...), so I just wrapped the input in another div and made that the transparent object instead, worked like a charm – Divestiture

who the hell still uses IE7? – Beetlebrowed

The only problem with this, is that if you want to change the button style on hover, you can't. Which means if you want it to look like all the other buttons in your app, you can't. – Tymon

Answer 3

You can fire click() on any browser but some browsers need the element to be visible and focused. Here's a jQuery example:

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

It works with the hide before the click() but I don't know if it works without calling the show method. Never tried this on Opera, I tested on IE/FF/Safari/Chrome and it works. I hope this will help.

Constantan

Thanks for sharing. Just in case you didn't know - you can use chaining in jQuery: $(...).show().focus().click().hide(); :) – Latini

@pimvdb: as far as I test, your solution only works on Chrome. – Drake

@Hoàng Long: Do you mean the chaining or Florin Mogos' solution? I don't believe chaining would make any cross-browser differences. – Latini

@pimvdb: I mean Florin's solution. – Drake

@HoàngLong It works for me in IE 8 and 9, latest Chrome, Safari, and Firefox. – Tankoos

Strange. As I tested, It does not work under Chrome in Ubuntu. – Imposture

It is not working in Firefox, for me, although IE works fine. I don't have any other browsers to test. – Idealist

Works in Android browser for Android version 4.0.4, also iOS 8.0.2 – Gyrostatics

Works great. Set the input file element to opacity: 0 and position: absolute so it doesn't show up on click in IE, otherwise it seems to work everywhere just fine. – Blister

To add to my previous comment (since I cannot edit it): set it to width: 0px; in addition to the opacity and position properties to fully avoid ocassional jerkyness in IE. – Blister

No it does not work. And if it works, it may be because the browser version. On chrome Version 47.0.2526.106 m there seems to be no way to get a primefaces upload file command to open the file popup. – Kirtley

Great it was! But sad, it not works for current time on modern browser ! – Strawberry

Answer 4

THIS IS POSSIBLE: Under FF4+, Opera ?, Chrome: but:

1. inputElement.click() should be called from user action context! (not script execution context)

2. <input type="file" /> should be visible (inputElement.style.display !== 'none') (you can hide it with visibility or something other, but not "display" property)

Anethole

This solved it for me. I had to add the javascript to the onclick attribute instead of binding to the event. – Anschauung

Upvoting the only reasonable solution. Overflow method is ugly. – Backache

Ha! I knew it had to be something to with the context! I had observed that calling inputElement.click() from within a keydown event (shortcut to attach a file) worked, but calling it in a timeout or ajax callback did NOT. Upvoted. – Custody

Btw does anyone have any further resources on the "user action context" versus "script execution context"? Everything I am seeing when searching has to do with execution context and this. :/ – Custody

@bretjonesdev I think that means it needs to be executed inside of a user-initiated event handler, like a click event handler, versus a promise, timeout, or any other non user initiated event. – Bibliopole

Answer 5

just use a label tag, that way you can hide the input, and make it work through its related label https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label

Mineral

This is the right answer and it should be promoted. – Intercut

This is the right answer. All others are long and painful hacks. – Pringle

Answer 6

For those who understand that you have to overlay an invisible form over the link, but are too lazy to write, I wrote it for you. Well, for me, but might as well share. Comments are welcome.

HTML (Somewhere):

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

HTML (Somewhere you don't care about):

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

JavaScript:

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

Griz

Answer 7

Try this solution: http://code.google.com/p/upload-at-click/

Hertfordshire

That looks very ugly at least on IE9. – Unfleshly

Answer 8

If you want the click method to work on Chrome, Firefox, etc, apply the following style to your input file. It will be perfectly hidden, it's like you do a display: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

It's that simple, I tested it works!

Circumbendibus

I like this way the best since some older browsers won't do anything on inputElement.click() if it is hidden. – Phenoxide

Why not just set the height and width to 0? – Tadich

Answer 9

$(document).one('mousemove', function() { $(element).trigger('click') } );

Worked for me when I ran into similar problem, it's a regular eRube Goldberg.

Moazami

Answer 10

WORKING SOLUTION

Let me add to this old post, a working solution I used to use that works in probably 80% or more of all browsers both new and old.

The solution is complex yet simple. The first step is to make use of CSS and guise the input file type with "under-elements" that show through as it has an opacity of 0. The next step is to use JavaScript to update its label as needed.

HTML _{The ID's are simply inserted if you wanted a quick way to access a specific element, the classes however, are a must as they relate to the CSS that sets this whole process up}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

CSS _{Keep in mind, coloring and font-styles and such are totally your preference, if you use this basic CSS, you can always use after-end mark up to style as you please, this is shown in the jsFiddle listed at the end.}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

JavaScript _{Pure and true, however, some OLDER (retired) browsers may still have trouble with it (like Netscrape 2!)}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

Working jsFiddle Example

Digitate

Answer 11

It works :

For security reasons on Firefox and Opera, you can't fire the click on file input, but you can simulate with MouseEvents :

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

Harmonium

Note that the createEvent() and initMouseEvent() are now deprecated. – Crackle

Answer 12

I know this is old, and all these solutions are hacks around browser security precautions with real value.

That said, as of today, fileInput.click() works in current Chrome (36.0.1985.125 m) and current Firefox ESR (24.7.0), but not in current IE (11.0.9600.17207). Overlaying a file field with opacity 0 on top of a button works, but I wanted a link element as the visible trigger, and hover underlining doesn't quite work in any browser. It flashes on then disappears, probably the browser thinking through whether hover styling actually applies or not.

But I did find a solution that works in all those browsers. I won't claim to have tested every version of every browser, or that I know it'll continue to work forever, but it appears to meet my needs now.

It's simple: Position the file input field offscreen (position: absolute; top: -5000px), put a label element around it, and trigger the click on the label, instead of the file field itself.

Note that the link does need to be scripted to call the click method of the label, it doesn't do that automatically, like when you click on text inside a label element. Apparently the link element captures the click, and it doesn't make it through to the label.

Note also that this doesn't provide a way to show the currently selected file, since the field is offscreen. I wanted to submit immediately when a file was selected, so that's not a problem for me, but you'll need a somewhat different approach if your situation is different.

Pearlinepearlman

Okay, on button tag, onclick="filetag.click()" does not work with IE 9 and 10 (but works with IE 11, Firefox 4/10/26/27/28, Chrome/Chromium 31/32/33/36, Safari 7, Opera 23). But, if you use a label for="id-of-file-input" (without onlick), it works for IE 9/10/11. – Tank

Answer 13

JS Fiddle: http://jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};

<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>

Benefice

the delay method not working in safari – Razid

Another full example codepen.io/damiencuvillier/pen/eYRQmjz – Roi

Answer 14

Here is pure JavaScript solution to this problem. Works well across all browsers

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

Vonnie

Answer 15

This code works for me. Is this what you are trying to do?

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

Touter

Answer 16

My solution for Safari with jQuery and jQuery-ui:

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

Waksman

heads up: does not work for firefox 33, chrome 38. trigger('click') can work only within user interaction event context - event handlers. – Chalcis

Answer 17

I was researching this a while ago because I wanted to create a custom button that would open the file dialog and start the upload immediately. I just noticed something that might make this possible - firefox seems to open the dialog when you click anywhere on the upload. So the following might do it:

1. Create a file upload and a separate element containing an image that you want to use as the button
2. Arrange them to overlap and make the file element backgroud and border transparent so the button is the only thing visible
3. Add the javascript to make IE open the dialog when the button/file input is clicked
4. Use an onchange event to submit the form when a file is selected

This is only theoretical since I already used another method to solve the problem but it just might work.

Ideogram

Answer 18

There are ways to redirect events to the control but don't expect to be able to easily fire events to the fire control yourself as the browsers will try to block that for (good) security reasons.

If you only need the file dialog to show up when a user clicks something, let's say because you want better looking file upload buttons, then you might want to take a look at what Shaun Inman came up with.

I've been able to achieve keyboard triggering with creative shifting of focus in and out of the control between keydown, keypress & keyup events. YMMV.

My sincere advice is to leave this the alone, because this is a world of browser-incompatibility-pain. Minor browser updates may also block tricks without warning and you may have to keep reinventing hacks to keep it working.

Torruella

Answer 19

I had a <input type="button"> tag hidden from view. What I did was attaching the "onClick" event to any visible component of any type such as a label. This was done using either Google Chrome's Developer Tools or Mozilla Firefox's Firebug using the right-click "edit HTML" command. In this event specify the following script or something similar:

If you have JQuery:

$('#id_of_component').click();

if not:

document.getElementById('id_of_component').click();

Thanks.

Smarm

Answer 20

This will now be possible in Firefox 4, with the caveat that it counts as a pop-up window and will therefore be blocked whenever a pop-up window would have been.

Conservator

Actually firefox4 improve the state of file upload a lot. My trouble is how to do the same in Google Chrome browser. – Willena

Answer 21

Here is solution that work for me: CSS:

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

HTML with "small" JQuery help:

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

Just be sure that maskfied is covered compeltly by true upload field.

Capelin

Answer 22

You can do this as per answer from Open File Dialog box on <a> tag

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

Gault

Answer 23

I found that if input(file) is outside form, then firing click event invokes file dialog.

Volans

Answer 24

Hopefully this helps someone - I spent 2 hours banging my head against it:

In IE8 or IE9, if you trigger opening a file input with javascript in any way at all (believe me I've tried them all), it won't let you submit the form using javascript, it will just silently fail.

Submitting the form via a regular submit button may work but calling form.submit(); will silently fail.

I had to resort to overlaying my select file button with a transparent file input which works.

Cycloid

In addition you can wrap the file input in a label so that in IE you can get the label's clickable area to cover your whole button region whereas with just a file input tag, only half of it is clickable in IE. – Cycloid

Answer 25

This worked for me:

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

Brinn

Answer 26

it's not impossible:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

But somehow it works only if this is in a function which was called via a click-event.

So you might have following setup:

html:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

Tile

The createEvent() and initMouseEvent() were deprecated. You have to use a CustomEvent() now... – Crackle

Answer 27

Hey this solution works. for download we should be using MSBLOB

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

For AngularJS or even for normal javascript.

Amine

Answer 28

You can use

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>

Eldwun

Answer 29

To do so you can click an invisible, pass-through element over the file input :

function simulateFileClick() {
  const div = document.createElement("div")
  div.style.visibility = "hidden"
  div.style.position = "absolute"
  div.style.width = "100%"
  div.style.height = "100%"
  div.style.pointerEvents = "none"
  const fileInput = document.getElementById("fileInput") // or whatever selector you like
  fileInput.style.position = "relative"
  fileInput.appendChild(div)
  const mouseEvent = new MouseEvent("click")
  div.dispatchEvent(mouseEvent)
}

Mononuclear