1 (edited by Mav 2014-05-24 00:27:56)

Topic: How to use one plupload (core) instance with multiple browse buttons?

I have two buttons, each are supposed to show the browse dialog for a single file and each button has its own data-options that will be passed as multipart_params:

<button id="browse_one" data-uptype="one" data-dbid="42">Upload file</button>
<button id="browse_two" data-uptype="two" data-dbid="42">Upload file</button>

The 'uptype' and 'dbid' values are passed as multipart_params to the php uploadhandler so it can update the correct value in the database and tell where to save the file to. This already works fine with just a single browse button.

Now I want to have the second button also open the file dialog, and of course pass its own 'uptype' and 'dbid' values.

(I know I could init two or more plupload instances on a page, but that would also mean multiple uploadhandlers, and more for each other upload button elsewhere. I'd like to just use the single plupload instance and uploadhandler, and have each button pass their multipart_params.)

I've found this topic (which links to this one) and both seems to be what I'm trying to do. But the example/advice there does not tell me where to actually put it in the code, but I think it should be in the click event of 2nd button? I've tried to boil it down to just showing an alert if it can actually trigger the browsedialog but nothing I've tried so far works. How do I do this? Where do I add the code to trigger the browsebutton click, but with its own data for the multipart_params?

My js file with the plupload stuff looks like this:

$('#browse_one').click(function(event) {
    event.preventDefault();
});

$('#browse_two').click(function(event) {
    //from what I understand, I should be able to trigger "click" of button one,
    //and hopefully pass the data of button two here...?
    if (uploader.features.triggerDialog) {
        alert ( 'We can trigger the file dialog programmatically!' ); //this does not show up at all...
    }
    event.preventDefault(); // cancel default behavior
});

initPlUpload();

function initPlUpload() {
    var uptype = $('#browse_one').data("uptype"); //gets the two values for multipart_params...
    var dbid = $('#browse_one').data("dbid"); //...from button one

    var uploader = new plupload.Uploader({
        runtimes : 'html5',
        browse_button : 'browse_one', //this of course works for the first button...
        //...etc...all the settings and the rest of plupload here...

I really wish there was a way to open the file dialog with a plupload command, and passing the data-variables. Instead of triggering the original plupload browsebutton set in its options, feels like an incorrect way of doing things tbh. hmm

2 (edited by Mav 2014-05-24 00:58:34)

Re: How to use one plupload (core) instance with multiple browse buttons?

In one of the linked topics, admin LeandroJF says something like this should work:

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

And 'up' should be replaced here with the plupload instance var, but I've been trying to use this everywhere and it will not work.

if (uploader.features.triggerDialog) {...

I've now figured out that this will never work since the plupload uploader var isn't global (and it shouldn't be), so I have no idea where to programmatically make sure plupload shows the filebrowse window on additional buttons...

After finding yet another topic about this on stackoverflow (the answer at the bottom), I've tried adding this:

// Hook in the second button
    plupload.addEvent( $('#browse_two'), 'click', function(e) {
      var input = $('#browse_one');
      if (input && !input.disabled) {
        input.click();
      } // if
      e.preventDefault();
    });

This does not work, tried it outside of everything, inside of plupload settings, inside the plupload function, any place in the js file, no results. I also can not find anything about how plupload.addevent() is supposed to work. Is .addEvent() a standard js thing, a plupload or jquery function? As far as I can tell it does nothing (js is horrible and shows no errors/warnings ever... I'm a php guy mostly but usually understand js well enough to make it work, but this one has me pulling hairs).

Where in the code are you supposed to add this? The two topics that have some examples are not clear about this. The plupload documentation doesn't explain it either and from the sheer amount of questions about this exact thing, both in forums and on stackoverflow, it should really be added.


EDIT: as expected it's finally showing me the error that .addEvent() is not a function. I've tried it on plupload.addEvent, uploader.addEvent.. it's not doing anything, is this a queuewidget-only function and not part of the core perhaps?

Re: How to use one plupload (core) instance with multiple browse buttons?

In the code above you are trying to use plupload.addEvent on a jQuery object: $('#browse_two'), that won't work. You should pass plain DOM object. But that's not relevant in general.

If you have multiple browse buttons and each one requires different configuration options, you should instantiate multiple Plupload instances. That's the whole point of it. You can have a single upload handler, what's the problem? I do not see why you have to have multiple handlers. And there's nothing wrong about having multiple Plupload instances on the page. Don't be afraid of it smile

If you want to see your issue fixed, do not report it here, do it on - GitHub.

4 (edited by Mav 2014-05-26 08:05:05)

Re: How to use one plupload (core) instance with multiple browse buttons?

Thanks, I've gotten three buttons working fine using multiple instances. I guess for some reason in assumed I should have one single plupload instance and just update the options per browse button. Thinking it might clash otherwise, but turns out it indeed works fine with multiple instances. Even simultaneously.

I used a loop like $(".browsebuttons").each(function() {... so I wouldn't have all plupload options and binds multiple times in the code. Required a bit of fiddling with the progressbars and preview updates, every set needs a unique id to be able to update it easily.

For anyone else having issues getting this type of thing going, this code snippet helped a lot for getting the general idea of how to do it. (I still think an example like this could be very useful on the site/documentation here...)