Manually trigger 'open file dialog' using plupload

Question

I'm using plupload to client scaling of pictures before they are uploaded. I like the feature that it gracefully falls back to html4 if the user doesn't have flash, silverlight etc engines installed.

I want to be able to start the upload when the user clicks certain elements on the page and i want to handle the events (sometimes stopping a file dialog from opening). In fact i'd like to pop open the file dialog using javascript.

Ok, so HTML4 (or rather the browser, except chrome :P) won't let me do this, unless the user clicks a browse-button (or an overlay covering a browse-button), so when i get the fallback to HTML4 i'll accept that i can't do it, but most users will have flash or silverlight installed and they do not have this restriction. So my question is this:

How do i trigger the file open dialog in plupload (keeping in mind i only need the flash and silverlight engines to do this).

score 14 · Answer 1 · answered Feb 18 '15 at 20:01

14

The former solutions not worked on iPhones with plupload 2.1.2.

The following code did the trick (jquery needed):

$("#id_of_the_second_button").click(function() { 
    $('div.moxie-shim input[type=file]').trigger('click');
});

answered Feb 18 '15 at 20:01

estornes

386
3
10

Worked for me too with plupload() _not pluploadQueue()_ here is my problem and link to @estornes answer :) – Meloman Apr 29 '16 at 15:43

Ilija · Answer 2 · 2015-04-16T09:52:02.680

6

Fallback runtimes will become irrelevant as times goes by. This means that sooner or later, we'll be all using HTML5 runtime. In case that you are using HTML5 runtime, but don't use pluploadQueue(), this will work as well:

// Set up and initialise uploader
var uploader = new plupload.Uploader({
  'runtimes' : 'html5',
  'browse_button' : 'id_of_the_first_button'

  // Other options
});

uploader.init();

// Hook in the second button
plupload.addEvent(document.getElementById('id_of_the_second_button'), 'click', function(e) {
  var input = document.getElementById(uploader.id + '_html5');
  if (input && !input.disabled) {
    input.click();
  } // if
  e.preventDefault();
});

edited Apr 16 '15 at 09:52

answered Oct 14 '13 at 14:29

Ilija

4,105
4
32
46

Found some reference to this and pluploadQueue... http://www.plupload.com/punbb/viewtopic.php?pid=6879#p6879 – CrandellWS Aug 05 '14 at 13:28
very nice. exactly what i needed – robert Aug 14 '14 at 03:08

score 5 · Accepted Answer · answered Dec 19 '12 at 05:30

5

If someone is searching for the HTML5 solution, here it is:

var up= $('#uploader').pluploadQueue();
if (up.features.triggerDialog) {
    plupload.addEvent(document.getElementById('idOtherButton'), 'click', function(e) {
        var input = document.getElementById(up.id + '_html5');
        if (input && !input.disabled) { // for some reason FF (up to 8.0.1 so far) lets to click disabled input[type=file]
            input.click();
        }
        e.preventDefault();
    }); 
}

answered Dec 19 '12 at 05:30

Léon Pelletier

2,701
2
40
67

3

Yes, HTML5 is the way to go with modern browsers (Flash, Silverlight and HTML4 are just fallback runtimes). Since I am not using ``pluploadQueue()``, I used ``plupload.Uploader`` instance to get the ID of the input and trigger click even to get Select Files dialog (answer below). – Ilija Oct 14 '13 at 14:36

score 2 · Answer 4 · answered Apr 11 '11 at 08:02

2

Ok. It doesn't seem possible to do this, so unless someone implements event handles for the silverlight and flash components i'm out of luck

answered Apr 11 '11 at 08:02

Per Hornshøj-Schierbeck

15,097
21
80
101

2

Actually Flash and Silverlight won't let you to trigger file dialog programmatically. It is allowed to happen only as a reaction to some event like mouse click (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html#browse()). – jayarjo Apr 05 '13 at 11:56
1

@jayarjo - the docs state the method throws "Error — If the method is not called in response to a user action, such as a mouse event or keypress event." It doesn't state if that mouse event or keypress has to be within the flash control. Does anyone know if triggering the upload from the press of an external button is possible? – Mark Dec 11 '13 at 03:26

score 0 · Answer 5 · edited May 23 '17 at 11:46

0

I read your problem.

I found some articles that may help to figure this out. check them. It may help...!

01. https://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input-e

02. https://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript

edited May 23 '17 at 11:46

Community

1
1

answered Mar 13 '11 at 13:15

Dilhan Maduranga

2,201
1
16
12

Both your solutions are concerning javascript/html4 and neither actually work for the situation i need. I know my question is pretty specific, but i only need this functionality in pluploads silverlight and flash engines, not in html4 – Per Hornshøj-Schierbeck Mar 15 '11 at 22:47

score 0 · Answer 6 · answered Apr 07 '20 at 04:57

@Per Hornshøj-Schierbeck After uploader has been init. It take few time to render input file to select. So you need to wait like below:

this.uploader.init();
var task = new Ext.util.DelayedTask(function () {
    var inputArray = $('div.moxie-shim input[type=file]');
    var input = inputArray.length > 1 ? inputArray[inputArray.length - 1] : 
                inputArray[0];
    $(input).trigger('click');
 });

task.delay(100);

The code in javascript is similar. Worked for me with plupload 2.3.6

Hop this help!

Manually trigger 'open file dialog' using plupload

6 Answers6

Linked