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).

Answer 1

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();
    }); 
}

Answer 2

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

Answer 3

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();
});

Answer 4

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

Answer 5

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