Using Multiple Dropzones And File Inputs With A Single Plupload Instance
Yesterday, when I was looking at the latest release of Plupload (v2.0 beta), I found a wonderful playland of classes that had been factored out of the original Plupload library as a means to make Plupload more flexible. And, when I saw that they had added a way to programmatically add files to a Plupload instance, I got excited that I may finally be able to associate multiple dropzones with a single Plupload instance - something that I don't believe had been possible in the past.
Run this demo in my Plupload Multiple Dropzones project on GitHub.
With the recent updates, the Plupload authors have factored out the classes - FileDrop and FileInput - as a means to independently add drag-drop functionality and file selection functionality to a given DOM element. As the same time, they have also added the method, addFile(), to the Plupload instance. This addFile() method can accept instances of the mOxie.File object, which is exactly what the FileDrop and FileInput classes emit. Pretty freakin' sweet!
To try and wire several of these dropzones into a single Plupload instance, I have put together this demo (which builds on yesterday's image preview demo):
This demo has eight (8) peripheral dropzones. And, using the FileDrop and FileInput constructors, I am able to pipe the various file-selection events into the addFile() method on the main Plupload instance. This has some seriously awesome implications; like being able to have a persistent uploader that dynamically connects to transient dropzones and file inputs. Yo, the Plupload guys are killing it with this new release!
Want to use code from this post? Check out the license.
As a note, I should say that you have to be a little bit careful with the FileDrop as it won't necessarily be supported by all browsers. While I haven't tested this specifically, what I *assume* you would have to do would be to bind to the "onready" event and assume that it will only fire *if* the browser supported drag-drop events.
When I first approached the demo, I actually was using the "ready" event to call .show() on the peripheral dropzones; but, I dropped that (no pun intended) to simplify the demo.
Thank you Ben for this nice post.
Unfortunatelly it is not working on IE 10/11
I did upgraded the PlUpload plugin from the GitHub and it fixed the issues.
Now that you mention that, I know that I had to do some IE-10-specific tweaking to my Plupload code in our production app. I wish I could remember what it was! IE10 was the first IE to allow for Drag-Drop and it started breaking (even though Firefox and Chrome and Safari all worked properly).
Oooh, I remember what it was! In my production code (which does NOT use Plupload v2 Beta), I have the "container" and the "dropzone" be the same element. With the non-IE browsers, this works fine because the Input that gets dynamically added has a "z-index: -1", which puts it behind everything else.
But, with IE, the omit the z-index so the Input ended up covering the dropzone. As such, the "click to select files" would work in IE10 but, the drag-drop feature would not work (even though it was supported by the runtime).
I think I did that ONLY in the IE browser and let everything else work as it always had.
Anyway, off topic, but I just wanted to get that off my chest :)
Thanks! Just what i needed and something that definitely should be included in plupload docs somewhere!
very Helpful !!
Thanks !! :)
This is a great post. One question I had on extending this - do you know if there's an easy way to identify which dropzone/bucket the files were dropped into and subsequently attach a multiparam value to those files? So for example, on upload, these files will have a dropzone_id of "NE", etc...
This is exactly what I was looking for, thanks
Thank you. This is helpful stuff. I am wondering if you may know how I can relate the drop event back to the dropzone element. There are some uuid's that are generated. One is added as an ID to the dropzone element. ondrop(event) has event.target.uid and ruid... however but I can't find anything that matches between the two. Ultimately I am simply trying to put the filename displayed on the dropzone used... then I'm planning to manage the file buffer so that if you were to drag a different file to the same dropzone it would remove the previously dropped file from the queue and add the new. Thanks!
how can i preload images into the upload area when the page is loaded or refreshed?
let's say i have two images:
$pic1 = "uploads/photo.jpg";
$pic2 = "uploads/anotherphoto.jpg";
i want them to auto load every time the page is loaded or refreshed.
if max_files_count is set to 5, there will be 3 slots available for more pics, in this example.
Epic, Ben. Thanks so much!
is there a way to find out witch dorp /select box was used by the drop-files event?i have added id's to the html, and now want to know to witch one was used.
<li class="dropzone nw">
... id = "ds1"href="#">Drop / Select
<li class="dropzone n">
... id="ds2" href="#">Drop / Select