1 (edited by Mav 2014-02-15 07:02:59)

Topic: From v2.0.0 to v2.1.x - settings & browse_button not working anymore

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: 

2 (edited by Mav 2014-02-15 07:01:32)

Re: From v2.0.0 to v2.1.x - settings & browse_button not working anymore

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.

Re: From v2.0.0 to v2.1.x - settings & browse_button not working anymore

container option tells Plupload that it should append it's structures, including a dialog trigger to the DOM element specified by that container option. If you do not specify it explicitly, Plupload will use an immediate parent of the browse_button element.

Now by executing: $('#fileQueue').empty(); you effectively remove all contents from the container option, including the Plupload itself. No surprise that it doesn't work. Actually I wonder how it used to work previously...

What are you actually trying to achieve by doing that?

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

4 (edited by Mav 2014-02-17 03:53:33)

Re: From v2.0.0 to v2.1.x - settings & browse_button not working anymore

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.