15

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

Improve this question

6 Answers 6

Reset to default
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');
});
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Worked for me too with plupload() not pluploadQueue() here is my problem and link to @estornes answer :)
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();
});
Improve this answer

2 Comments

Found some reference to this and pluploadQueue... plupload.com/punbb/viewtopic.php?pid=6879#p6879
very nice. exactly what i needed
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();
    }); 
}
Improve this answer

1 Comment

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

Improve this answer

2 Comments

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 (help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/…).
@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?
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

Improve this answer

1 Comment

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
0

@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!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.