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. + Along with each file, this example also submits an additional POST variable (the file's name). + Once each upload completes, the server sends the received file name POST variable back, along with a time + stamp, and the example displays them next to the file.
+ +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: 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.
+| File name | File size | Percent uploaded | Data from Server |
|---|---|---|---|
| + No files selected. + | +|||
Sending and Retrieving Data from the Server
+This example is based on the Uploader with HTML5 Drag-and-Drop Support, but adds custom POST variables along with each file upload, + and retrieves and displays data received from the server in response to each file upload.
+ +To send additional POST variables along with files, we populate the postVarsPerFile attribute when files are selected:
+
+
uploader.after("fileselect", function (event) {
+
+ ...
+
+ var perFileVars = {};
+
+ 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>" +
+ "<td class='serverdata'> </td>");
+
+ perFileVars[fileInstance.get("id")] = {filename: fileInstance.get("name")};
+ });
+
+ uploader.set("postVarsPerFile", Y.merge(uploader.get("postVarsPerFile"), perFileVars));
+});
+
+
+When uploads complete, we can retrieve and display the data received from the server (in this case, the filename POST variable that we transmitted,
+ along with the server timestamp):
+
+
uploader.on("uploadcomplete", function (event) {
+
+ ...
+
+ fileRow.one(".serverdata").setHTML(event.data);
+});
+
+
+Full Source Code For this Example
+ +<style>
+#filelist {
+ margin-top: 15px;
+}
+
+#uploadFilesButtonContainer, #selectFilesButtonContainer, #overallProgress {
+ display: inline-block;
+}
+
+#overallProgress {
+ float: right;
+}
+
+.yellowBackground {
+ background: #F2E699;
+}
+
+.serverdata {
+ font-size: 0.8em;
+}
+</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><th>Data from Server</th></tr>
+ <tr id="nofiles">
+ <td colspan="4" 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("");
+ }
+
+ var perFileVars = {};
+
+ 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>" +
+ "<td class='serverdata'> </td>");
+
+ perFileVars[fileInstance.get("id")] = {filename: fileInstance.get("name")};
+ });
+
+ uploader.set("postVarsPerFile", Y.merge(uploader.get("postVarsPerFile"), perFileVars));
+ });
+
+ 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!");
+ fileRow.one(".serverdata").setHTML(event.data);
+ });
+
+ 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>
+
+
+