--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/uploader/uploader-multiple.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,504 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Simple Multiple Files Uploader with Progress Tracking</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: Simple Multiple Files Uploader with Progress Tracking</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.</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;
+}
+</style>
+
+<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">
+ No files have been selected.
+ </td>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ </table>
+</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;
+
+ 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>Setting up Uploader UI</h2>
+<p>In this example, the UI for the Uploader consists of two buttons, a label field for displaying the uploader type and the overall upload progress, as well as a table for displaying information about the upload process per file. We first create the markup for the UI:</p>
+
+<pre class="code prettyprint"><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 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">
+ No files have been selected.
+ </td>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ </table>
+</div></pre>
+
+
+<p>Next, we create, configure and render an instance of the Uploader. Note that we initially check that the <code>Y.Uploader.TYPE</code> property is
+ not set to 'none' and that we are not trying to run the code on an iOS device (where file uploads are not allowed because of a closed file system).
+ Also note that we are setting a fixed width and height on the uploader, which is necessary in order for the Flash overlay to render correctly
+ in browsers where Flash is used:
+</p>
+
+<pre class="code prettyprint">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;
+
+ uploader.render("#selectFilesButtonContainer");
+
+ ...</pre>
+
+
+<h2>Adding Uploader Event Handlers</h2>
+
+<p>We can now add handlers for various uploader events. The first handler is for the <code>fileselect</code> event. In it, we retrieve the list of
+ files selected by the user and populate the table with their names, sizes and a field for reporting the percentage uploaded for each
+ file. The id of each row in the table is prefixed with the unique file id it is associated with, for easy reference later:</p>
+
+<pre class="code prettyprint">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>");
+ });
+});</pre>
+
+<p>For the <code>uploadprogress</code> event, we update the individual file row (using the unique file id prefix to reference each row) with the
+ <code>percentLoaded</code> property from the event payload.</p>
+
+<pre class="code prettyprint">uploader.on("uploadprogress", function (event) {
+ var fileRow = Y.one("#" + event.file.get("id") + "_row");
+ fileRow.one(".percentdone").set("text", event.percentLoaded + "%");
+});</pre>
+
+
+<p>When the upload starts, we disable the uploader and the <code>Upload Files</code> button until the upload process is complete:</p>
+
+<pre class="code prettyprint">uploader.on("uploadstart", function (event) {
+ uploader.set("enabled", false);
+ Y.one("#uploadFilesButton").addClass("yui3-button-disabled");
+ Y.one("#uploadFilesButton").detach("click");
+});</pre>
+
+
+<p>When each individual file upload completes, we update the table row corresponding with the file with the appropriate
+ message:</p>
+
+<pre class="code prettyprint">uploader.on("uploadcomplete", function (event) {
+ var fileRow = Y.one("#" + event.file.get("id") + "_row");
+ fileRow.one(".percentdone").set("text", "Finished!");
+});</pre>
+
+
+<p>On <code>totaluploadprogress</code> events, we report the overall upload progress in the top-right message container:</p>
+
+<pre class="code prettyprint">uploader.on("totaluploadprogress", function (event) {
+ Y.one("#overallProgress").setHTML("Total uploaded: <strong>" + event.percentLoaded + "%" + "</strong>");
+});</pre>
+
+
+<p>We can listen for the <code>alluploadscomplete</code> event to find out when all uploads have completed, re-enable the uploader and report that information accordingly:</p>
+
+<pre class="code prettyprint">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) {
+ console.log(uploader.get("fileList").length);
+ uploader.uploadAll();
+ });
+ Y.one("#overallProgress").set("text", "Uploads complete!");
+ uploadDone = true;
+});</pre>
+
+
+<p>Finally, we add the <code>click</code> event listener to the "Upload Files" button to start the file upload process:</p>
+
+<pre class="code prettyprint">Y.one("#uploadFilesButton").on("click", function () {
+ if (!uploadDone && uploader.get("fileList").length > 0) {
+ console.log(uploader.get("fileList").length);
+ uploader.uploadAll();
+ }
+});</pre>
+
+
+<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;
+}
+</style>
+
+<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">
+ No files have been selected.
+ </td>
+ </tr>
+ </thead>
+ <tbody>
+ </tbody>
+ </table>
+</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;
+
+ 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-multiple',
+ title: 'Simple Multiple Files Uploader with Progress Tracking',
+ 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>