CODEWITHSUNDEEP
javascriptjquery
chicharito
chicharito

Reputation: 1087

Trigger file input dialog

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');

Upvotes: 16

Views: 6881

Answers (8)

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

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>

Upvotes: 11

Gopal Joshi
Gopal Joshi

Reputation: 2358

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.

Upvotes: 2

guest271314
guest271314

Reputation: 1

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>

Upvotes: 4

Krishan
Krishan

Reputation: 2477

<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

Upvotes: 4

Shekhar Khairnar
Shekhar Khairnar

Reputation: 2691

You can do it somthing like as :

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

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

Upvotes: 5

Dhara
Dhara

Reputation: 1481

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

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

click event triggerd.

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

Upvotes: 5

Dave Pile
Dave Pile

Reputation: 5764

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');

Upvotes: 4

reoxey
reoxey

Reputation: 704

you can write something like this

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

this should work fine

Upvotes: 4

Related Questions