<div class="intro">
<p>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.</p>
   
<p><strong>Please note:</strong> 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.</p>

<p><strong>Also note:</strong> You will need compile and host your own <code>flashuploader.swf</code> file to enable Flash mode which is needed for IE <= 9. Necessary source files are available in the <a href="https://github.com/yui/yui3-swfs">yui3-swfs</a> repository.</p>

<p><strong>Also note:</strong> 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.</p>

<p><strong>Also note:</strong> 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.</p>
</div>

<div class="example yui3-skin-sam">
    {{>uploader-dd-source}}
</div>

<h2>Progressive Enhancement with a Drag-and-Drop Area</h2>

<p>The base functionality in this example is the same as in the <a href="uploader-multiple.html">Simple Multiple Files Uploader</a>, but we are conditionally adding support for a
   drag-and-drop area for cases where the HTML5 uploader is being used:<p>

```
if (Y.Uploader.TYPE == "html5") {
   uploader.set("dragAndDropArea", "body");
   Y.one("#ddmessage").setHTML("<strong>Drag and drop files here.</strong>");   
 
   uploader.on(["dragenter", "dragover"], function (event) {
       var ddmessage = Y.one("#ddmessage");
       if (ddmessage) {
         ddmessage.setHTML("<strong>Files detected, drop them here!</strong>");
         ddmessage.addClass("yellowBackground");
       }
    });

    uploader.on(["dragleave", "drop"], function (event) {
       var ddmessage = Y.one("#ddmessage");
       if (ddmessage) {
         ddmessage.setHTML("<strong>Drag and drop files here.</strong>");
         ddmessage.removeClass("yellowBackground");
       }
    });
}
```

<p>Note that we are setting the entire page `<body>` 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.
</p>

<h2>Full Source Code For this Example</h2>

```
{{>uploader-dd-source}}
```

