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

Answer 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 = $("", {
    css: {
      position: "relative",
      top: "36vh",
      left: "12vw",
      fontSize: "3.6em"
    }
  })

  , dialog = $("
", {
      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;
}

  

    Upload