jQuery trigger file input

JavascriptJqueryCss

Javascript Problem Overview

Am trying to trigger an upload box (browse button) using jQuery.
The method I have tried now is:

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

But it doesn't seem to work. Please help. Thank you.

Javascript Solutions

Solution 1 - Javascript

This is due to a security restriction.

I found out that the security restriction is only when the <input type="file"/> is set to display:none; or is visbilty:hidden.

So i tried positioning it outside the viewport by setting position:absolute and top:-100px; and voilà it works.

see http://jsfiddle.net/DSARd/1/

call it a hack.

Hope that works for you.

Solution 2 - Javascript

this worked for me:

JS:

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

HTML:

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

CSS:

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

>>>Another one that works Cross-Browser:<<<

The Idea is that you overlay an invisible huge "Browse" button over your custom button. So when the user clicks your custom button, he's actually clicking on the "Browse" button of the native input field.

JS Fiddle: http://jsfiddle.net/5Rh7b/

HTML:

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

CSS:

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

JavaScript:

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});

Solution 3 - Javascript

You can use LABEL element ex.

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>

This will trigger the input file

Solution 4 - Javascript

I have it working (=tested) in IE8+, recent FF and chrome:

$('#uploadInput').focus().trigger('click');

The key is focusing before firing the click (otherwise chrome ignores it).

Note: you do NEED to have your input displayed and visible (as in, not display:none and not visibility:hidden). I suggest (as many other have before) to absolutely position the input and throw it off screen.

#uploadInput {
    position: absolute;
    left: -9999px;
}

Solution 5 - Javascript

Check out my fiddle.

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}


<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>

Solution 6 - Javascript

Just for the sake of curiosity, you can do something like you want by dynamically creating an upload form and input file, without adding it to the DOM tree:

$('.your-button').on('click', function() {
    let uploadForm = document.createElement('form');
    let fileInput = uploadForm.appendChild(document.createElement('input'));
    
    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

No need to add the uploadForm to the DOM.

Solution 7 - Javascript

adardesign nailed it regarding the file input element being ignored when it is hidden. I also noticed many people shifting element size to 0, or pushing it out of bounds with positioning and overflow adjustments. These are all great ideas.
An alternative way that also seems to work perfectly well is to just set the opacity to 0. Then you can always just set the position to keep it from offsetting other elements as hide does. It just seems a little unnecessary to shift an element nearly 10K pixels in any direction.

Here's a little example for those who want one:

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}

Solution 8 - Javascript

Actually, I found out a really easy method for this, which is:

$('#fileinput').show().trigger('click').hide();

This way, your file input field can have the css property display on none and still win the trade :)

Solution 9 - Javascript

Correct code:

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>

Solution 10 - Javascript

That's on purpose and by design. It's a security issue.

Solution 11 - Javascript

It is too late to answer but I think this minimal setup work best. I am also looking for the same.

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

//css

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

bootstrap file input buttons demo

Solution 12 - Javascript

This is a very old question, but unfortunately this issue is still relevant and requires a solution.

The (suprisingly simple) solution I've come up with is to "hide" the actual file input field and wrap it with a LABEL tag (can be based on Bootstrap and HTML5, for enhancement).

See here:Example code here

This way, the real file input field is invisible and all you see is the customized "button" which is actually a modified LABEL element. When you click on this LABEL element, the window for selecting a file comes up and the file you choose will go into the real file input field.

On top of that, you can manipulate the look and behaviour as you wish (for example: get the name of the selected file from the file input file, after selected, and show it somewhere. The LABEL element doesn't do that automatically, of course. I usually just put it inside the LABEL, as its text content).

Beware though! The manipulation of the look and behaviour of this is limited to whatever you can imagine and think of.    ;-)  ;-)

Solution 13 - Javascript

I managed with a simple $(...).click(); with JQuery 1.6.1

Solution 14 - Javascript

or else simply

$(':input[type="file"]').show().click().hide();

Solution 15 - Javascript

You can click the input file from your JQuery while keeping it hidden fully.

I am using this:

< input type="file" name="article_input_file" id="article_input_file" accept=".xlsx,.xls" style="display: none" >

$("#article_input_file").click();

this works from within any standard script tag in your HTML page.

Solution 16 - Javascript

i had problems with custom client side validation for <input type="file"/> while using a fake button to trigger it and @Guillaume Bodi's solution worked for me (also with opacity: 0; on chrome)

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

and css style for upload input

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}

Solution 17 - Javascript

Try this, it's a hack. the Position:absolute is for Chrome and trigger('change') is for IE.

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});

Solution 18 - Javascript

My problem was a little bit different on iOS 7. Turns out FastClick was causing problems. All I had to do was add class="needsclick" to my button.

Solution 19 - Javascript

This is probably the best answer, keeping in mind the cross browser issues.

CSS:

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

JS:

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML:

<a class="file-upload">Upload</a>
<input type="file" name="file">

Solution 20 - Javascript

I think i understand your problem, because i have a similar. So the tag <label> have the atribute for, you can use this atribute to link your input with type="file". But if you don't want to activate this using this label because some rule of your layout, you can do like this.

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});


.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>

Of course you will adapt this for your own purpose and layout, but that's the more easily way i know to make it work!!

Solution 21 - Javascript

Based on Guillaume Bodi's answer I did this:

$('.fileinputbar-button').on('click', function() {
	$('article.project_files > header, article.upload').show();
	$('article.project_files > header, article.upload header').addClass('active');
	$('.file_content, article.upload .content').show();
	$('.fileinput-button input').focus().click();
	$('.fileinput-button').hide();
});

which means it's hidden to start with and then displayed for the trigger, then hidden again immediately.

Categories
Recommended Javascript Solutions
Recommended Jquery Solutions
Recommended Css Solutions

Previous Solution:

How is the "greater than" or ">" character used in CSS?

CssCss Selectors

Next Solution:

Static extension methods

C#Extension Methods

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAlec SmartView Question on Stackoverflow
Solution 1 - JavascriptadardesignView Answer on Stackoverflow
Solution 2 - JavascriptsledView Answer on Stackoverflow
Solution 3 - JavascriptJhon ReyView Answer on Stackoverflow
Solution 4 - JavascriptThe Mighty Rubber DuckView Answer on Stackoverflow
Solution 5 - JavascriptMohanView Answer on Stackoverflow
Solution 6 - JavascriptjairhumbertoView Answer on Stackoverflow
Solution 7 - JavascripteyegropramView Answer on Stackoverflow
Solution 8 - JavascriptskywlkrView Answer on Stackoverflow
Solution 9 - JavascriptE9 SistemasView Answer on Stackoverflow
Solution 10 - JavascriptChad GrantView Answer on Stackoverflow
Solution 11 - JavascriptNatwar SinghView Answer on Stackoverflow
Solution 12 - JavascriptTheCuBeManView Answer on Stackoverflow
Solution 13 - JavascriptValentin GaleaView Answer on Stackoverflow
Solution 14 - JavascriptOtvazhniiView Answer on Stackoverflow
Solution 15 - JavascriptDark StarView Answer on Stackoverflow
Solution 16 - JavascriptAmin KView Answer on Stackoverflow
Solution 17 - JavascriptthinpiglinView Answer on Stackoverflow
Solution 18 - JavascriptDexView Answer on Stackoverflow
Solution 19 - JavascriptEddstersView Answer on Stackoverflow
Solution 20 - JavascriptLeonardo LindrothView Answer on Stackoverflow
Solution 21 - JavascriptStevoView Answer on Stackoverflow