1

(2 replies, posted in Core API)

For just one file, I just auto-start the upload when the user adds a file. And I also disable the browse button while the progressbar is shown instead. Using jQuery UI button and progressbar stuff here, but the idea should be clear:

                FilesAdded: function(up, files) {
                    // Called when files are added to queue
                    $("#yourbrowsebutton").button("disable").hide();
                    $("#yourprogressbar").progressbar().show();
                    //auto start the upload after file is added
                    uploader.start();
                },

You could show/enable the button again on 'UploadComplete', or not.

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

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?

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

EDIT: I figured out what changed, see at bottom
-----
The fileQueue is a single div containing the notice of 'your browser doesn't have html5/flash support', that notice is removed when plupload initializes. Then it is used as the container div for the queue, all files selected are added in there. The upload/browse button are outside of this div.

All it does is empty that container div and when files are added to the queue they are added in there. Plupload isn't bound to that div as I'm starting plupload like 'var uploader = new plupload.Uploader({...' right? Or perhaps this has changed since 2.0.0? But the core demo does exactly the same (line 42), except it's not using jQuery to empty the container:

document.getElementById('filelist').innerHTML = '';

I thought it was maybe my jQuery method causing the problem, but using this to clear the div has the same effect.

Although, the example has that line in 'PostInit' where as with my script it's in the 'PreInit' section. All I know is PreInit worked before, but I don't see it listed in the documentation either, only Init and PostInit. Has PreInit been removed/changed in 2.1.x?

-----
Here's how the HTML of it looks, there's filequeue div, then some options and the browse/upload buttons:

<div id="fileQueue">
        <p>You browser doesn't have HTML5 or Flash support.</p> //this gets removed via $('#fileQueue').empty();
</div>
<div id="options">
    <fieldset><legend>Alignment & Size:</legend>
        <div class="alignset">
            <button id="imgleft">Left</button>
            <button id="imgcentered">Center</button>
            <button id="imgright">Right</button>
        </div>
        <div class="sizeset">
            <button id="size_150">150px</button>
            <button id="size_250">250px</button>
            <button id="size_570">500px</button>
        </div>
    </fieldset>
    <fieldset><legend>Watermark:</legend>
        <div class="watermarkset">
            <button id="wm_none"><img src="none.png" title="No watermark" /></button>
            <button id="wm_dark"><img src="dark.png" title="On dark backgrounds" /></button>
            <button id="wm_bright"><img src="bright.png" title="On bright backgrounds" /></button>
        </div>
    </fieldset>
    <fieldset>
        <div id="upload-control">
            <button id="fileUpload">Select files</button>
            <button id="uploadfiles">Start upload</button>
        </div>
    </fieldset>
</div>

-----
EDIT: Figured out what has changed from 2.0.0 to 2.1.x

After further inspection, I noticed plupload would add a hidden div like this to the container:

<div id="html5_18guphcpv1cg11uc41kbddi21be53_container" class="moxie-shim moxie-shim-html5"...

I didn't know this happened, I always assumed the container setting was where it would add the htmlcode to show queued files (it still might by default but clearly isn't what the 'container' settings is for).

Now on 2.0.0 the line to .empty() that container div didn't remove the plupload-div because it isn't created yet at that point. The 'preInit' section I have the .empty() in works in 2.0.0 because it would really run before initialization of plupload, but in 2.1.x the preInit section doesn't run before initialization.
Either that, or the order in which the plupload-div gets added has changed to before the execution of any preInit code. Or perhaps the preInit option has been removed completely? Since I don't see it in the documentation now. Although it's still messing things up in 2.1.x so, not sure what's going on with that.

Lots of examples have this preinit section though, so if that's been removed or made somewhat backwards compatible it's currently not working as before. It doesn't run the pre-init section actually before the init of plupload.

        // PreInit events, bound before any internal events
        preinit: {
            Init: function(up, info) {
                log('[Pre-Init]', 'Info:', info, 'Features:', up.features);
                $('#fileQueue').empty();
            },

Bottom line, I have removed my container setting and now it all works again. I thought 'container' was to indicate the div for the file queue list but it isn't, and so wasn't needed at all. Plupload now gets added to the browse button's parent and everything works again. Still I wonder if the preinit option is still available, removed or not working as intented. It does still run the code in there so I'm thinking it's not working as in 2.0.0 and runs after-init instead of pre-init.

[Init] Info: runtime=html5 Features: chunks=true, multipart=true, multi_selection=true 

It also still doesn't recognize my chunk_size:'0' setting though, which should turn off chunks. But it does recognize that drag_drop should be off. Also if I add multi_selection:false to the settings, the file-open-dialog no longer allows multiple files to be selected as expected... but that info line will still say multi_selection=true. So the chunks are probably off as well even though the features info says they're on? Something is not working correctly with .features showing what's enabled or not.

Apparently this line in the 'preinit' section does no longer work in 2.1.x versions while it did in 2.0.0a/beta versions:

$('#fileQueue').empty();

Without that line the browser_button works in 2.1.1 and gives the popup window, but all the other settings are still being ignored. Like drag_drop:false and chunk_size:0.

Also, replacing that line with what's used in the core example, it has the same effect of stopping the browse button to work:

document.getElementById('fileQueue').innerHTML = '';

I don't know what's up with this... hmm Whatever it is, it does not like the container element to be empty. But even if it isn't empty it's clearly not using the settings at all.

The code below is what I've been using with version 2.0.0a and 2.0.0beta and it works on those versions. But when I change the plupload files to version 2.1.0, 2.1.1 or the current nightly, the exact same code doesn't work anymore:

//start plupload
$(function() {
    var listerrors = {}; //used to display errors via log() as in examples
    
    //start settings
    var uploader = new plupload.Uploader({
        runtimes: 'html5,flash',
        browse_button: 'fileUpload',
        container: 'fileQueue',
        url: 'plupload/examples/upload.php',
        drag_drop: false,
        drop_element: 'fileQueue',
        max_file_size: '25mb',
        chunk_size : '0',
        unique_names: true,
        prevent_duplicates: true,
        sortable: false,
        flash_swf_url: 'plupload/js/Moxie.swf',
        filters: [
            {title : "Image files", extensions : "jpg,jpeg,png,bmp"}
        ],

        // PreInit events, bound before any internal events
        preinit : {
            Init: function(up, info) {
                log('[Pre-Init]', 'Info:', info, 'Features:', up.features);
                $('#fileQueue').empty(); //EDIT: <<--- this line stopped working in 2.1.x, see first reply below
            },
        },

        // Post init events, bound after the internal events
        init : {
            //only contains some events with the log() function like in the examples
        }

    }); //end settings

    uploader.bind('Init', function(up, info) {
        log('[Init]', 'Info:', info, 'Features:', up.features);
    });

    uploader.bind('Error', function(up, err) {
        listerrors[err.file.id+'msg'] = err.message;
        listerrors[err.file.id+'code'] = err.code;
        log('[listerrors]', listerrors);
        up.refresh(); //Reposition Flash/Silverlight
    });

    $('#uploadfiles').click(function(event) {
        uploader.start();
        event.preventDefault();
    });

    uploader.init();

}); //end plupload

Using:

  • jQuery 2.0.3 although I've tried a bunch of different versions as well.

  • plupload.full.min.js

The HTML simply contains a button with the id for the browse_button, it's not hidden or disabled:

<button id="fileUpload">Select files</button>

The log() thing on both pre-init and init shows me this on 2.1.0, 2.1.1 and nightly:

[Pre-Init] Info: runtime=html5 Features: chunks=true, multipart=true, multi_selection=true, dragdrop=true
[Init] Info: runtime=html5 Features: chunks=true, multipart=true, multi_selection=true, dragdrop=true

So Plupload does get initialized but doesn't disable chunks and dragdrop from the settings, and the browse button doesn't open the files window. I bet it's just completely ignoring all options I've set, which in turn stops the browse_button from working as it's also defined in the settings. The upload button does work since that's separately defined in a click event and not in the settings. Also the log() shows the 'started/stopped' statechanged even without files selected if I click the upload button, so Plupload is running for sure.

What has changed since 2.0.0a that makes a previously working script to stop working? Did the settings section change? As far as I can see from the current examples, this should still work... hmm

-----
This probably has no significance, but it shows other info on the older versions. I believe that was just not implemented yet back then, I remember even earlier versions did show features but these didn't:

2.0.0beta
[Pre-Init] Info: runtime=html5 Features:
[Init] Info: runtime=html5 Features: 

2.0.0a
[Pre-Init] Info: runtime=Generic Features:
[Init] Info: runtime=Generic Features: 

8

(112 replies, posted in News)

davit wrote:

What happened is that Plupload 2 is not binded to any specific runtime and may theoretically use different runtime for different operation. We do not currently actively use it, but it is how the core now operates. We've left runtime descriptor as "Generic" for backward compatibility, since quite some scripts use it without checking if it's there or not.

Ah, okay, then I will not even show which runtime it's using. But will it still listen to the preference settings you've set up or has this changed as well? I mean the runtimes you've chosen to use and in what order they are in? runtimes : 'html5,flash' for example.

It's just that while flash is accepted in the browser, it's causing some problems with our old uploadscript sometimes. This is why I've started converting everything to use plupload with its html5 support. I'd like to keep flash(and perhaps other runtimes) as a back-up for those who don't experience problems with flash but have html5 as preference.

As suggestion: it might still be useful to display which runtime is being used, if only for error reporting. If something doesn't work, I'd like to have the option of asking people to tell me what error it is giving and which runtime is displayed. Though alternatively this could be included within the error I guess, or being able to switch to some kind of debug-mode.

9

(112 replies, posted in News)

Has something been changed with the runtime version and features list now there are less runtimes included in Plupload 2?

Basically this code from the events example.

preinit : {
    Init: function(up, info) {
    log('[Init]', 'Info:', info, 'Features:', up.features);
    },
...etc

Should show something like this:

[Init] Info: runtime=html5 Features: html5=true, dragdrop=true,
 jpgresize=true, pngresize=true, multipart=true, canSendBinary=true,
 cantSendBlobInFormData=false, progress=true, chunks=true,
 multi_selection=true

But I'm getting only this in my log:

[Init] Info: runtime=Generic Features:

I'm just trying to show which runtime it is currently using, but 'Generic' is not exactly html5 or flash, and it's odd it doesn't list any of the available features either. (Using plupload_2_0a.02031151 which I downloaded last night.)

Other than this missing bit it's all running beautifully so far, even the prevent_duplicates setting which I didn't see on the documentation page. Probably added in Plupload 2?  It accepts duplicate filenames that are still different images, which is great (as long as you're using unique_names as well I suppose). I was using an old version of swfupload before, but this is so much better. smile