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.