2

Tigran Saluev suggested the following answer to manually triggering a prompt to select a file, but the code used jQuery. His code was a follows: 

var input = $(document.createElement("input"));
input.attr("type", "file");
input.trigger("click");

In my project, I wanted the equivalent effect but without jQuery. I thought I had it here:

var input = document.createElement("input");
input.setAttribute("type", "file");
input.dispatchEvent(new Event("click"));

But nothing happens. What am I doing incorrectly?

Benjamin Brownlee
  • 434
  • 4
  • 16

3 Answers3

2

In your case a simple click() call is all that is needed to trigger the event. Or if you want to use dispatch event, you want to create a Mouse Event and trigger that.

var fi = document.querySelector("#f");

// simple call to click()
document.querySelector("button.test1").addEventListener("click", function() {
 f.click()
});

// Or with dispatch event
document.querySelector("button.test2").addEventListener("click", function() {
  var event = new MouseEvent('click', {
    view: window,
    bubbles: true,
    cancelable: true
  });
  fi.dispatchEvent(event);
});
<input id="f" type="file" />
<button class="test1" type="button"> CLICK ME 1</button>
<button class="test2" type="button"> CLICK ME 2</button>
epascarello
  • 204,599
  • 20
  • 195
  • 236
1

you can use initMouseEvent as an alternative to trigger

here's link to it to the api, for more details

function clickSimulation(id) {
   var theEvent;
   var theElement = document.getElementById(id);
   if (document.createEvent) {
      theEvent = document.createEvent("MouseEvents");
      theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
   }
   (theEvent) ? theElement.dispatchEvent(theEvent) : (theElement.click && theElement.click());
}

var input = $(document.createElement("input"));
input.attr("type", "file");
input.attr("id", "TheFileCatcher");

clickSimulation("TheFileCatcher");
manish
  • 1,450
  • 8
  • 13
0

I think you were just missing an event listener. Try the following construction:

// Create an input object
var input = $(document.createElement("input"));
input.attr("type", "file");

// Add an event listener
input.addEventListener("click", function(e) {
  console.log(e.detail);
});

// Create the event
var event = new CustomEvent("click", { "detail": "My click event" });

// Dispatch/Trigger/Fire the event
input.dispatchEvent(event);

You can also try "playing" with an event types, so instead of CustomEvent you can try the same you did in your code, because click is not a custom one. I assume that the problem is because you are missing an event listener

Ref to the original answer

EDIT Found an info about security restriction for triggering file input programmatically

Most browsers prevent submitting files when the input field didn't receive a direct click (or keyboard) event as a security precaution. Some browsers (e.g. Google Chrome) simply prevent the click event, while e.g. Internet Explorer doesn't submit any files that have been selected by a programmatically triggered file input field. Firefox 4 (and later) is so far the only browser with full support for invoking "click"-Events on a completely hidden (display: none) file input field.

JSEvgeny
  • 2,550
  • 1
  • 24
  • 38
  • This fires a custom event. I was looking to get default action of the click event on the input, which opens file select. – Benjamin Brownlee Apr 10 '18 at 05:12
  • Yes I see. I also noticed that you are using jQuery when creating an input and assigning an attribute to it, so why can't you use jQuery to trigger click event on your input? – JSEvgeny Apr 10 '18 at 06:33
  • And I'm afraid you can not do the same thing with vanila js, because of browsers security policies, I will update my answer with an information about that – JSEvgeny Apr 10 '18 at 06:34