1

i'm having trouble in chrome opening the popup for the file upload of a file input type.

As you can see here: http://jsfiddle.net/cavax/K99gg/3/, clicking on an elements can trigger a click on the file input, but for example hovering a element wont trigger a click on the input.

$('#test').on('click', function(){
   $('#upload').trigger('click');
});
$('#test').on('mouseenter', function(){
   $('#upload').trigger('click');
});

In the real life i'm having this trouble because in a web app i'm loading throw ajax a content witch has inside an input file. At the end of the load the popup file must open, but there is no way to get this works on Chrome (workign on FF).

The problem i guess is that the action is not generated by a mouse click (hover, timeout etc) so chrome wont trigger the fileupload.

I've also tryed this: http://jsfiddle.net/cavax/K99gg/7/, so click on the element, wait then trigger the click but nothing, because there is the "settimeout" in the middle of the click and the trigger :(

$('#test').on('click', function(){
  setTimeout(function(){
    $('#upload').trigger('click');
  }, 3000);
});

if you remove the delay: http://jsfiddle.net/cavax/K99gg/8/ it works Any idea to get this work?

Dtnand
  • 449
  • 3
  • 14
  • is mouseenter the correct syntax to use? shouldn't it be onmouseenter? – user3036342 Mar 06 '14 at 11:30
  • 1
    @user3036342 `on()` is a method so `mouseenter` is correct – Dhaval Marthak Mar 06 '14 at 11:32
  • The `/8` fiddle works because you're simply redirecting the user's own actions. Same as opening a new window, browsers will only allow triggering file selection during certain events and while one of those event is still active. The `setTimeout()` in `/7` allows the event to expire first and the `'mouseenter'` in `/3` doesn't make sense to cause a `'click'`. – Jonathan Lonowski Mar 06 '14 at 12:43
  • i've improved my question, the thing is, how can i keep the click event active and pass it throw the redsquare to the input? – Dtnand Mar 06 '14 at 12:46
  • @Dtnand Use only synchronous code in your handlers if they depend on the event's state. You can't force it to remain active until a timer, or anything else asynchronous, completes. Once it's bubbled/propagated if it's going to and the last bound handler has been called and exited, the event's done. – Jonathan Lonowski Mar 06 '14 at 12:54
  • so @Jonathan Lonowski you think that there is now way to load a file input form thorow ajax and then hit it? I've also tryed simulating the click in many many ways but no way – Dtnand Mar 06 '14 at 14:02

2 Answers2

0

If I remember correctly, mouseenter and mouseleave are specific to IE, not standard events. Maybe they were extended, but don't think they became a standard. So the event itself may generate you some problems.

To resolve this you can use a lib (like jQuery for example), that treats the browser differences (or you can check the code there and take what you need).

Second way... try mouseover... it worked better (again... didn't work with them for a while so things may have happened, but this is how I remember them to be).

zozo
  • 8,230
  • 19
  • 79
  • 134
  • is not that the problem because here: http://jsfiddle.net/cavax/K99gg/4/ i'm using just click and anyway the mouseenter is detected (look at the log) it just wont open the popup. – Dtnand Mar 06 '14 at 12:15
0

There is no way to trigger click event of input file type, because of a security reason.

You may try a hack of this by setting your button/div position to absolute and top to -100px It means positioning it outside the viewport by setting above style make it works.

But for mouseenter and mouseover i don't think it's going to work!

Edit:

Moved input outside the viewport and target click event

Example on click

Side note: Right now click occurs 2 times as you have written 

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

You just need 

$('#upload').trigger('click');  //  $('#upload').click()

unless you want it to fire more than single time.

Dhaval Marthak
  • 17,246
  • 6
  • 46
  • 68
  • Well there is a way, because this works: http://jsfiddle.net/cavax/K99gg/5/ and this one nope: http://jsfiddle.net/cavax/K99gg/4. (click on the red square) So i cant figure out how hiding the input out of the vieport can help me:( – Dtnand Mar 06 '14 at 12:13
  • @Dtnand Look I have updated my answer and is [this](http://jsfiddle.net/K99gg/6/) what you want? – Dhaval Marthak Mar 06 '14 at 12:24
  • Nope @Dhaval Marthak, sorry if i'm not explaining rightly. http://jsfiddle.net/cavax/K99gg/7/ If you click on the square the input (hidden or not) WONT open if there is a delay between the click and the trigger. If you remove the delay: http://jsfiddle.net/cavax/K99gg/8/ it works. – Dtnand Mar 06 '14 at 12:43
  • @Dtnand It's working sometimes if you set delay of `1000` and sometimes it loses it! I don't know why it's happening but strange! Look at [this](http://jsfiddle.net/K99gg/9/)! – Dhaval Marthak Mar 06 '14 at 12:57
  • Yap i saw that, think is because the event expire as @Jonathan Lonowski was saying. i guess that there is no way to solve it:( – Dtnand Mar 06 '14 at 14:00