Trigger file input dialog

Question

How can I auto trigger file input? ie. in the link below I want to trigger upload button on load

DEMO

<form id="test_form">
    <input type="file" id="test">
    <div id="test1">
        <button>Upload</button>
    </div>
</form>

$("#test1").trigger('click');
$("#test").trigger('click');

Answer 1

File input can't be automatically triggered in onload due to security purpose. It can't be fired without any user interaction. It is very disgusting when a page activates anything itself when the page loads.

By the way. You can use label instead of button like following:

<label for="test">Upload</label>

Answer 2

$("document").ready(function() {
    setTimeout(function() {
        $("#test1").trigger('click');
    },10);

    $('#test1').click(function(){
        alert('hii');
    })
});

click event triggerd.

http://jsfiddle.net/j9oL4nyn/1/

Answer 3

You can do it somthing like as :

<button id="upld_btn">Upload</button>

$(document).ready(function () {
   $('#upld_btn').trigger('click');
});

Answer 4

you can write something like this

$(document).ready(function(){
    $("input#test").click();
});

this should work fine

Answer 5

The problem with your code is that you are applying a click event to the input and also to the div enclosing the button, but not to the actual button.

if you change your fiddle to this

<form id="test_form">
  <input type="file" id="test">
      <div id="test1"><button onclick="alert('click');">Upload</button></div>
</form>

and

$("#test1 button").trigger('click');

then the click trigger will be applied to the button. Alternatively give your button an ID and fo

$("#buttonid").trigger('click');

Answer 6

It is not possible to programically open "Open File" dialog utilizing javascript without user action ; see Trigger click on input=file on asynchronous ajax done() .

Could, alternatively, create an element to overlay html at document .ready() event to provide user with options to click to open "Open File" dialog by calling click on input type="file" element , or close overlay of html by clicking "Close" .

$(function() {

  function openFileDialog() {
    button.fadeTo(0,1).find(input)[0].click();
    dialog.hide();
  }

  function closeDialog() {
    dialog.hide();
    button.fadeTo(0,1);
  }

  var input = $("input[type=file]")

  , button = $("#button").on("click", function(e) {
    e.stopPropagation();
    this.firstElementChild.click()
  })

  , options = $("<button>", {
    css: {
      position: "relative",
      top: "36vh",
      left: "12vw",
      fontSize: "3.6em"
    }
  })

  , dialog = $("<div>", {
      id: "dialog",
      css: {
        position: "absolute",
        zIndex: 2,
        opacity: 0.25,
        background: "dodgerblue",
        width: window.innerWidth - 30,
        height: window.innerHeight
      }
    })
    .append(
      options
      .clone(false)
      .on("click", openFileDialog)
      .html("Open File")
    , options
      .clone(false)
      .on("click", closeDialog)
      .html("Close")
    )
    .prependTo("body");
  
});

input {
  width: 0;
  opacity: 0;
}

#button {
  position: relative;
  font-size: 32px;
  width: 150px;
  left: 32vw;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form id="test_form">
  <div id="test1">
    <button id="button">Upload
      <input type="file" id="test">
    </button>
  </div>
</form>

Answer 7

<form id="test_form">
  <input type="file" id="test">
      <div id="test1"><button>Upload</button></div>
</form>

Change your JS code like below.

$("#test1 button").click(function() {
$("#test").trigger('click');
});

Working Demo

Answer 8

Show input file dialog on load?

As described here only Internet Explorer allows for programmatic opening of the File Upload dialog. So the short answer is no, there is no way to automatically open the File Upload dialog on page load.

The long answer that you might consider is that you can show it when the user clicks on anything. The fact that you prefer an AngularJS solution tells us that you are writing a Single Page Application. Also, I don't think you need to show the File Upload dialog when the app first loads. You most likely need it to show after some user interaction - after the user clicks on something. That something, using the an AngularJS directive from here, could look like anything but be a file input. On click (the same user interaction) you can also switch to another route in your AngularJS app, effectively simulating a user navigating to another page and automatically presenting him the File Upload dialog.