In this example, the Uploader is used to send multiple images or videos to the server and monitor their upload progress with individual counters. If the Uploader is used in a browser with HTML5 support, it is progressively enhanced to enable dragging-and-dropping files into the browser window.
Please note: This example will not work when run from a local filesystem because of security restrictions in the transport protocols used. If you’d like to run this example locally, set up a local web server and launch it from there.
Also note: You will need compile and host your own flashuploader.swf file to enable Flash mode which is needed for IE <= 9. Necessary source files are available in the yui3-swfs repository.
Also note: The uploader is not supported on iOS devices (iPhone and iPad), because they lack file upload capability. This example provides a graceful degradation message for all such systems.
Also note: The backend script used in these examples does not store any information it receives. Nevertheless, do not submit any sensitive or private data and keep your tests to a few small files to avoid overloading the system.
The base functionality in this example is the same as in the Simple Multiple Files Uploader, but we are conditionally adding support for a drag-and-drop area for cases where the HTML5 uploader is being used:
``` if (Y.Uploader.TYPE == "html5") { uploader.set("dragAndDropArea", "body"); Y.one("#ddmessage").setHTML("Drag and drop files here."); uploader.on(["dragenter", "dragover"], function (event) { var ddmessage = Y.one("#ddmessage"); if (ddmessage) { ddmessage.setHTML("Files detected, drop them here!"); ddmessage.addClass("yellowBackground"); } }); uploader.on(["dragleave", "drop"], function (event) { var ddmessage = Y.one("#ddmessage"); if (ddmessage) { ddmessage.setHTML("Drag and drop files here."); ddmessage.removeClass("yellowBackground"); } }); } ```
Note that we are setting the entire page `
` as the drag-and-drop area, so the user can drop the files anywhere onto the page. We also add a visual response to the files being dragged over the page by listening to the `dragenter`, `dragover`, `dragleave` and `drop` events.