<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example: Multiple Files Uploader with HTML5 Drag-and-Drop Support</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
<link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
<link rel="stylesheet" href="../assets/css/main.css">
<link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
<link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
<script src="../../build/yui/yui-min.js"></script>
</head>
<body>
<!--
<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
-->
<div id="doc">
<div id="hd">
<h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
</div>
<h1>Example: Multiple Files Uploader with HTML5 Drag-and-Drop Support</h1>
<div class="yui3-g">
<div class="yui3-u-3-4">
<div id="main">
<div class="content"><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> 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">
<style>
#filelist {
margin-top: 15px;
}
#uploadFilesButtonContainer, #selectFilesButtonContainer, #overallProgress {
display: inline-block;
}
#overallProgress {
float: right;
}
.yellowBackground {
background: #F2E699;
}
</style>
<div id="exampleContainer">
<div id="uploaderContainer">
<div id="selectFilesButtonContainer">
</div>
<div id="uploadFilesButtonContainer">
<button type="button" id="uploadFilesButton"
class="yui3-button" style="width:250px; height:35px;">Upload Files</button>
</div>
<div id="overallProgress">
</div>
</div>
<div id="filelist">
<table id="filenames">
<thead>
<tr><th>File name</th><th>File size</th><th>Percent uploaded</th></tr>
<tr id="nofiles">
<td colspan="3" id="ddmessage">
<strong>No files selected.</strong>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
YUI({filter:"raw"}).use("uploader", function(Y) {
Y.one("#overallProgress").set("text", "Uploader type: " + Y.Uploader.TYPE);
if (Y.Uploader.TYPE != "none" && !Y.UA.ios) {
var uploader = new Y.Uploader({width: "250px",
height: "35px",
multipleFiles: true,
swfURL: "../../build/uploader/assets/flashuploader.swf?t=" + Math.random(),
uploadURL: "http://yuilibrary.com/sandbox/upload/",
simLimit: 2,
withCredentials: false
});
var uploadDone = false;
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");
}
});
}
uploader.render("#selectFilesButtonContainer");
uploader.after("fileselect", function (event) {
var fileList = event.fileList;
var fileTable = Y.one("#filenames tbody");
if (fileList.length > 0 && Y.one("#nofiles")) {
Y.one("#nofiles").remove();
}
if (uploadDone) {
uploadDone = false;
fileTable.setHTML("");
}
Y.each(fileList, function (fileInstance) {
fileTable.append("<tr id='" + fileInstance.get("id") + "_row" + "'>" +
"<td class='filename'>" + fileInstance.get("name") + "</td>" +
"<td class='filesize'>" + fileInstance.get("size") + "</td>" +
"<td class='percentdone'>Hasn't started yet</td>");
});
});
uploader.on("uploadprogress", function (event) {
var fileRow = Y.one("#" + event.file.get("id") + "_row");
fileRow.one(".percentdone").set("text", event.percentLoaded + "%");
});
uploader.on("uploadstart", function (event) {
uploader.set("enabled", false);
Y.one("#uploadFilesButton").addClass("yui3-button-disabled");
Y.one("#uploadFilesButton").detach("click");
});
uploader.on("uploadcomplete", function (event) {
var fileRow = Y.one("#" + event.file.get("id") + "_row");
fileRow.one(".percentdone").set("text", "Finished!");
});
uploader.on("totaluploadprogress", function (event) {
Y.one("#overallProgress").setHTML("Total uploaded: <strong>" +
event.percentLoaded + "%" +
"</strong>");
});
uploader.on("alluploadscomplete", function (event) {
uploader.set("enabled", true);
uploader.set("fileList", []);
Y.one("#uploadFilesButton").removeClass("yui3-button-disabled");
Y.one("#uploadFilesButton").on("click", function () {
if (!uploadDone && uploader.get("fileList").length > 0) {
uploader.uploadAll();
}
});
Y.one("#overallProgress").set("text", "Uploads complete!");
uploadDone = true;
});
Y.one("#uploadFilesButton").on("click", function () {
if (!uploadDone && uploader.get("fileList").length > 0) {
uploader.uploadAll();
}
});
}
else {
Y.one("#uploaderContainer").set("text", "We are sorry, but to use the uploader, you either need a browser that support HTML5 or have the Flash player installed on your computer.");
}
});
</script>
</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>
<pre class="code prettyprint">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");
}
});
}</pre>
<p>Note that we are setting the entire page <code><body></code> 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 <code>dragenter</code>, <code>dragover</code>, <code>dragleave</code> and <code>drop</code> events.
</p>
<h2>Full Source Code For this Example</h2>
<pre class="code prettyprint"><style>
#filelist {
margin-top: 15px;
}
#uploadFilesButtonContainer, #selectFilesButtonContainer, #overallProgress {
display: inline-block;
}
#overallProgress {
float: right;
}
.yellowBackground {
background: #F2E699;
}
</style>
<div id="exampleContainer">
<div id="uploaderContainer">
<div id="selectFilesButtonContainer">
</div>
<div id="uploadFilesButtonContainer">
<button type="button" id="uploadFilesButton"
class="yui3-button" style="width:250px; height:35px;">Upload Files</button>
</div>
<div id="overallProgress">
</div>
</div>
<div id="filelist">
<table id="filenames">
<thead>
<tr><th>File name</th><th>File size</th><th>Percent uploaded</th></tr>
<tr id="nofiles">
<td colspan="3" id="ddmessage">
<strong>No files selected.</strong>
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
YUI({filter:"raw"}).use("uploader", function(Y) {
Y.one("#overallProgress").set("text", "Uploader type: " + Y.Uploader.TYPE);
if (Y.Uploader.TYPE != "none" && !Y.UA.ios) {
var uploader = new Y.Uploader({width: "250px",
height: "35px",
multipleFiles: true,
swfURL: "../../build/uploader/assets/flashuploader.swf?t=" + Math.random(),
uploadURL: "http://yuilibrary.com/sandbox/upload/",
simLimit: 2,
withCredentials: false
});
var uploadDone = false;
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");
}
});
}
uploader.render("#selectFilesButtonContainer");
uploader.after("fileselect", function (event) {
var fileList = event.fileList;
var fileTable = Y.one("#filenames tbody");
if (fileList.length > 0 && Y.one("#nofiles")) {
Y.one("#nofiles").remove();
}
if (uploadDone) {
uploadDone = false;
fileTable.setHTML("");
}
Y.each(fileList, function (fileInstance) {
fileTable.append("<tr id='" + fileInstance.get("id") + "_row" + "'>" +
"<td class='filename'>" + fileInstance.get("name") + "</td>" +
"<td class='filesize'>" + fileInstance.get("size") + "</td>" +
"<td class='percentdone'>Hasn't started yet</td>");
});
});
uploader.on("uploadprogress", function (event) {
var fileRow = Y.one("#" + event.file.get("id") + "_row");
fileRow.one(".percentdone").set("text", event.percentLoaded + "%");
});
uploader.on("uploadstart", function (event) {
uploader.set("enabled", false);
Y.one("#uploadFilesButton").addClass("yui3-button-disabled");
Y.one("#uploadFilesButton").detach("click");
});
uploader.on("uploadcomplete", function (event) {
var fileRow = Y.one("#" + event.file.get("id") + "_row");
fileRow.one(".percentdone").set("text", "Finished!");
});
uploader.on("totaluploadprogress", function (event) {
Y.one("#overallProgress").setHTML("Total uploaded: <strong>" +
event.percentLoaded + "%" +
"</strong>");
});
uploader.on("alluploadscomplete", function (event) {
uploader.set("enabled", true);
uploader.set("fileList", []);
Y.one("#uploadFilesButton").removeClass("yui3-button-disabled");
Y.one("#uploadFilesButton").on("click", function () {
if (!uploadDone && uploader.get("fileList").length > 0) {
uploader.uploadAll();
}
});
Y.one("#overallProgress").set("text", "Uploads complete!");
uploadDone = true;
});
Y.one("#uploadFilesButton").on("click", function () {
if (!uploadDone && uploader.get("fileList").length > 0) {
uploader.uploadAll();
}
});
}
else {
Y.one("#uploaderContainer").set("text", "We are sorry, but to use the uploader, you either need a browser that support HTML5 or have the Flash player installed on your computer.");
}
});
</script></pre>
</div>
</div>
</div>
<div class="yui3-u-1-4">
<div class="sidebar">
<div class="sidebox">
<div class="hd">
<h2 class="no-toc">Examples</h2>
</div>
<div class="bd">
<ul class="examples">
<li data-description="A simple multiple file uploader with progress tracking">
<a href="uploader-multiple.html">Simple Multiple Files Uploader with Progress Tracking</a>
</li>
<li data-description="A multiple file uploader with HTML5 Drag-and-Drop Support">
<a href="uploader-dd.html">Multiple Files Uploader with HTML5 Drag-and-Drop Support</a>
</li>
<li data-description="A multiple file uploader that submits additional POST vars with each file and receives data from the server">
<a href="uploader-data.html">Multiple Files Uploader with POST Variables and Server Data Retrieval</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script>
YUI.Env.Tests = {
examples: [],
project: '../assets',
assets: '../assets/uploader',
name: 'uploader-dd',
title: 'Multiple Files Uploader with HTML5 Drag-and-Drop Support',
newWindow: '',
auto: false
};
YUI.Env.Tests.examples.push('uploader-multiple');
YUI.Env.Tests.examples.push('uploader-dd');
YUI.Env.Tests.examples.push('uploader-data');
</script>
<script src="../assets/yui/test-runner.js"></script>
</body>
</html>