src/cm/media/js/lib/yui/yui_3.10.3/docs/uploader/uploader-data.html
author Yves-Marie Haussonne <ymh.work+github@gmail.com>
Fri, 09 May 2014 18:35:26 +0200
changeset 656 a84519031134
parent 525 89ef5ed3c48b
permissions -rw-r--r--
add link to "privacy policy" in the header test
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
525
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     1
<!DOCTYPE html>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     2
<html lang="en">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     3
<head>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     4
    <meta charset="utf-8">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     5
    <title>Example: Multiple Files Uploader with POST Variables and Server Data Retrieval</title>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     6
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     7
    <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     8
    <link rel="stylesheet" href="../assets/css/main.css">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
     9
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    10
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    11
    <script src="../../build/yui/yui-min.js"></script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    12
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    13
</head>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    14
<body>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    15
<!--
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    16
<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>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    17
-->
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    18
<div id="doc">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    19
    <div id="hd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    20
        <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    21
    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    22
    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    23
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    24
            <h1>Example: Multiple Files Uploader with POST Variables and Server Data Retrieval</h1>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    25
    <div class="yui3-g">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    26
        <div class="yui3-u-3-4">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    27
            <div id="main">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    28
                <div class="content"><div class="intro">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    29
<p>In this example, the Uploader is used to send multiple images or videos to the server and monitor
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    30
   their upload progress with individual counters. If the Uploader is used in a browser with HTML5
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    31
   support, it is progressively enhanced to enable dragging-and-dropping files into the browser window.
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    32
   Along with each file, this example also submits an additional POST variable (the file's name).
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    33
   Once each upload completes, the server sends the received file name POST variable back, along with a time
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    34
   stamp, and the example displays them next to the file.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    35
   
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    36
<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>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    37
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    38
<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>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    39
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    40
<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
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    41
your tests to a few small files to avoid overloading the system.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    42
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    43
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    44
<div class="example yui3-skin-sam">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    45
    <style>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    46
#filelist {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    47
    margin-top: 15px;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    48
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    49
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    50
#uploadFilesButtonContainer, #selectFilesButtonContainer, #overallProgress {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    51
    display: inline-block;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    52
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    53
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    54
#overallProgress {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    55
    float: right;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    56
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    57
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    58
.yellowBackground {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    59
  background: #F2E699;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    60
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    61
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    62
.serverdata {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    63
  font-size: 0.8em;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    64
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    65
</style>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    66
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    67
<div id="exampleContainer">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    68
<div id="uploaderContainer">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    69
    <div id="selectFilesButtonContainer">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    70
    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    71
    <div id="uploadFilesButtonContainer">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    72
      <button type="button" id="uploadFilesButton"
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    73
              class="yui3-button" style="width:250px; height:35px;">Upload Files</button>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    74
    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    75
    <div id="overallProgress">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    76
    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    77
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    78
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    79
<div id="filelist">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    80
  <table id="filenames">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    81
    <thead>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    82
       <tr><th>File name</th><th>File size</th><th>Percent uploaded</th><th>Data from Server</th></tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    83
       <tr id="nofiles">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    84
        <td colspan="4" id="ddmessage">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    85
            <strong>No files selected.</strong>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    86
        </td>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    87
       </tr>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    88
    </thead>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    89
    <tbody>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    90
    </tbody>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    91
  </table>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    92
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    93
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    94
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    95
<script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    96
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    97
YUI({filter:"raw"}).use("uploader", function(Y) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    98
Y.one("#overallProgress").set("text", "Uploader type: " + Y.Uploader.TYPE);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
    99
   if (Y.Uploader.TYPE != "none" && !Y.UA.ios) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   100
       var uploader = new Y.Uploader({width: "250px",
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   101
                                      height: "35px",
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   102
                                      multipleFiles: true,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   103
                                      swfURL: "../../build/uploader/assets/flashuploader.swf?t=" + Math.random(),
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   104
                                      uploadURL: "http://yuilibrary.com/sandbox/upload/",
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   105
                                      simLimit: 2,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   106
                                      withCredentials: false
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   107
                                     });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   108
       var uploadDone = false;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   109
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   110
       if (Y.Uploader.TYPE == "html5") {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   111
          uploader.set("dragAndDropArea", "body");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   112
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   113
          Y.one("#ddmessage").setHTML("<strong>Drag and drop files here.</strong>");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   114
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   115
          uploader.on(["dragenter", "dragover"], function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   116
              var ddmessage = Y.one("#ddmessage");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   117
              if (ddmessage) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   118
                ddmessage.setHTML("<strong>Files detected, drop them here!</strong>");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   119
                ddmessage.addClass("yellowBackground");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   120
              }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   121
           });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   122
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   123
           uploader.on(["dragleave", "drop"], function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   124
              var ddmessage = Y.one("#ddmessage");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   125
              if (ddmessage) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   126
                ddmessage.setHTML("<strong>Drag and drop files here.</strong>");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   127
                ddmessage.removeClass("yellowBackground");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   128
              }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   129
           });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   130
       }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   131
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   132
       uploader.render("#selectFilesButtonContainer");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   133
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   134
       uploader.after("fileselect", function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   135
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   136
          var fileList = event.fileList;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   137
          var fileTable = Y.one("#filenames tbody");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   138
          if (fileList.length > 0 && Y.one("#nofiles")) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   139
            Y.one("#nofiles").remove();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   140
          }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   141
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   142
          if (uploadDone) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   143
            uploadDone = false;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   144
            fileTable.setHTML("");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   145
          }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   146
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   147
          var perFileVars = {};
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   148
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   149
          Y.each(fileList, function (fileInstance) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   150
              fileTable.append("<tr id='" + fileInstance.get("id") + "_row" + "'>" +
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   151
                                    "<td class='filename'>" + fileInstance.get("name") + "</td>" +
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   152
                                    "<td class='filesize'>" + fileInstance.get("size") + "</td>" +
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   153
                                    "<td class='percentdone'>Hasn't started yet</td>" +
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   154
                                    "<td class='serverdata'>&nbsp;</td>");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   155
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   156
              perFileVars[fileInstance.get("id")] = {filename: fileInstance.get("name")};
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   157
                             });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   158
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   159
              uploader.set("postVarsPerFile", Y.merge(uploader.get("postVarsPerFile"), perFileVars));
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   160
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   161
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   162
       uploader.on("uploadprogress", function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   163
            var fileRow = Y.one("#" + event.file.get("id") + "_row");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   164
                fileRow.one(".percentdone").set("text", event.percentLoaded + "%");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   165
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   166
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   167
       uploader.on("uploadstart", function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   168
            uploader.set("enabled", false);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   169
            Y.one("#uploadFilesButton").addClass("yui3-button-disabled");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   170
            Y.one("#uploadFilesButton").detach("click");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   171
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   172
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   173
       uploader.on("uploadcomplete", function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   174
            var fileRow = Y.one("#" + event.file.get("id") + "_row");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   175
                fileRow.one(".percentdone").set("text", "Finished!");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   176
                fileRow.one(".serverdata").setHTML(event.data);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   177
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   178
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   179
       uploader.on("totaluploadprogress", function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   180
                Y.one("#overallProgress").setHTML("Total uploaded: <strong>" + event.percentLoaded + "%" + "</strong>");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   181
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   182
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   183
       uploader.on("alluploadscomplete", function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   184
                     uploader.set("enabled", true);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   185
                     uploader.set("fileList", []);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   186
                     Y.one("#uploadFilesButton").removeClass("yui3-button-disabled");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   187
                     Y.one("#uploadFilesButton").on("click", function () {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   188
                          if (!uploadDone && uploader.get("fileList").length > 0) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   189
                             uploader.uploadAll();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   190
                          }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   191
                     });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   192
                     Y.one("#overallProgress").set("text", "Uploads complete!");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   193
                     uploadDone = true;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   194
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   195
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   196
       Y.one("#uploadFilesButton").on("click", function () {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   197
         if (!uploadDone && uploader.get("fileList").length > 0) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   198
            uploader.uploadAll();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   199
         }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   200
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   201
   }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   202
   else {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   203
       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.");
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   204
   }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   205
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   206
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   207
});
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   208
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   209
</script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   210
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   211
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   212
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   213
<h2>Sending and Retrieving Data from the Server</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   214
<p>This example is based on the <a href="uploader-dd.html">Uploader with HTML5 Drag-and-Drop Support</a>, but adds custom POST variables along with each file upload,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   215
   and retrieves and displays data received from the server in response to each file upload.</p>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   216
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   217
<p>To send additional POST variables along with files, we populate the <code>postVarsPerFile</code> attribute when files are selected:
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   218
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   219
<pre class="code prettyprint">uploader.after(&quot;fileselect&quot;, function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   220
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   221
   ...
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   222
            
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   223
   var perFileVars = {};
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   224
   
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   225
   Y.each(fileList, function (fileInstance) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   226
       fileTable.append(&quot;&lt;tr id=&#x27;&quot; + fileInstance.get(&quot;id&quot;) + &quot;_row&quot; + &quot;&#x27;&gt;&quot; + 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   227
                             &quot;&lt;td class=&#x27;filename&#x27;&gt;&quot; + fileInstance.get(&quot;name&quot;) + &quot;&lt;&#x2F;td&gt;&quot; + 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   228
                             &quot;&lt;td class=&#x27;filesize&#x27;&gt;&quot; + fileInstance.get(&quot;size&quot;) + &quot;&lt;&#x2F;td&gt;&quot; + 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   229
                             &quot;&lt;td class=&#x27;percentdone&#x27;&gt;Hasn&#x27;t started yet&lt;&#x2F;td&gt;&quot; +
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   230
                             &quot;&lt;td class=&#x27;serverdata&#x27;&gt;&amp;nbsp;&lt;&#x2F;td&gt;&quot;); 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   231
  
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   232
       perFileVars[fileInstance.get(&quot;id&quot;)] = {filename: fileInstance.get(&quot;name&quot;)};
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   233
   });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   234
   
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   235
   uploader.set(&quot;postVarsPerFile&quot;, Y.merge(uploader.get(&quot;postVarsPerFile&quot;), perFileVars));
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   236
});</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   237
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   238
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   239
<p>When uploads complete, we can retrieve and display the data received from the server (in this case, the <code>filename</code> POST variable that we transmitted,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   240
   along with the server timestamp):
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   241
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   242
<pre class="code prettyprint">uploader.on(&quot;uploadcomplete&quot;, function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   243
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   244
    ...
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   245
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   246
    fileRow.one(&quot;.serverdata&quot;).setHTML(event.data);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   247
});</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   248
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   249
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   250
<h2>Full Source Code For this Example</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   251
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   252
<pre class="code prettyprint">&lt;style&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   253
#filelist {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   254
    margin-top: 15px;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   255
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   256
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   257
#uploadFilesButtonContainer, #selectFilesButtonContainer, #overallProgress {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   258
    display: inline-block;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   259
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   260
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   261
#overallProgress {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   262
    float: right;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   263
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   264
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   265
.yellowBackground {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   266
  background: #F2E699;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   267
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   268
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   269
.serverdata {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   270
  font-size: 0.8em;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   271
}
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   272
&lt;&#x2F;style&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   273
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   274
&lt;div id=&quot;exampleContainer&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   275
&lt;div id=&quot;uploaderContainer&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   276
    &lt;div id=&quot;selectFilesButtonContainer&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   277
    &lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   278
    &lt;div id=&quot;uploadFilesButtonContainer&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   279
      &lt;button type=&quot;button&quot; id=&quot;uploadFilesButton&quot;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   280
              class=&quot;yui3-button&quot; style=&quot;width:250px; height:35px;&quot;&gt;Upload Files&lt;&#x2F;button&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   281
    &lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   282
    &lt;div id=&quot;overallProgress&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   283
    &lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   284
&lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   285
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   286
&lt;div id=&quot;filelist&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   287
  &lt;table id=&quot;filenames&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   288
    &lt;thead&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   289
       &lt;tr&gt;&lt;th&gt;File name&lt;&#x2F;th&gt;&lt;th&gt;File size&lt;&#x2F;th&gt;&lt;th&gt;Percent uploaded&lt;&#x2F;th&gt;&lt;th&gt;Data from Server&lt;&#x2F;th&gt;&lt;&#x2F;tr&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   290
       &lt;tr id=&quot;nofiles&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   291
        &lt;td colspan=&quot;4&quot; id=&quot;ddmessage&quot;&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   292
            &lt;strong&gt;No files selected.&lt;&#x2F;strong&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   293
        &lt;&#x2F;td&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   294
       &lt;&#x2F;tr&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   295
    &lt;&#x2F;thead&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   296
    &lt;tbody&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   297
    &lt;&#x2F;tbody&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   298
  &lt;&#x2F;table&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   299
&lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   300
&lt;&#x2F;div&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   301
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   302
&lt;script&gt;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   303
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   304
YUI({filter:&quot;raw&quot;}).use(&quot;uploader&quot;, function(Y) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   305
Y.one(&quot;#overallProgress&quot;).set(&quot;text&quot;, &quot;Uploader type: &quot; + Y.Uploader.TYPE);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   306
   if (Y.Uploader.TYPE != &quot;none&quot; &amp;&amp; !Y.UA.ios) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   307
       var uploader = new Y.Uploader({width: &quot;250px&quot;,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   308
                                      height: &quot;35px&quot;,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   309
                                      multipleFiles: true,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   310
                                      swfURL: &quot;..&#x2F;..&#x2F;build&#x2F;uploader&#x2F;assets&#x2F;flashuploader.swf?t=&quot; + Math.random(),
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   311
                                      uploadURL: &quot;http:&#x2F;&#x2F;yuilibrary.com&#x2F;sandbox&#x2F;upload&#x2F;&quot;,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   312
                                      simLimit: 2,
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   313
                                      withCredentials: false
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   314
                                     });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   315
       var uploadDone = false;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   316
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   317
       if (Y.Uploader.TYPE == &quot;html5&quot;) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   318
          uploader.set(&quot;dragAndDropArea&quot;, &quot;body&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   319
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   320
          Y.one(&quot;#ddmessage&quot;).setHTML(&quot;&lt;strong&gt;Drag and drop files here.&lt;&#x2F;strong&gt;&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   321
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   322
          uploader.on([&quot;dragenter&quot;, &quot;dragover&quot;], function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   323
              var ddmessage = Y.one(&quot;#ddmessage&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   324
              if (ddmessage) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   325
                ddmessage.setHTML(&quot;&lt;strong&gt;Files detected, drop them here!&lt;&#x2F;strong&gt;&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   326
                ddmessage.addClass(&quot;yellowBackground&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   327
              }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   328
           });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   329
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   330
           uploader.on([&quot;dragleave&quot;, &quot;drop&quot;], function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   331
              var ddmessage = Y.one(&quot;#ddmessage&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   332
              if (ddmessage) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   333
                ddmessage.setHTML(&quot;&lt;strong&gt;Drag and drop files here.&lt;&#x2F;strong&gt;&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   334
                ddmessage.removeClass(&quot;yellowBackground&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   335
              }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   336
           });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   337
       }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   338
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   339
       uploader.render(&quot;#selectFilesButtonContainer&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   340
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   341
       uploader.after(&quot;fileselect&quot;, function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   342
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   343
          var fileList = event.fileList;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   344
          var fileTable = Y.one(&quot;#filenames tbody&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   345
          if (fileList.length &gt; 0 &amp;&amp; Y.one(&quot;#nofiles&quot;)) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   346
            Y.one(&quot;#nofiles&quot;).remove();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   347
          }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   348
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   349
          if (uploadDone) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   350
            uploadDone = false;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   351
            fileTable.setHTML(&quot;&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   352
          }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   353
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   354
          var perFileVars = {};
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   355
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   356
          Y.each(fileList, function (fileInstance) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   357
              fileTable.append(&quot;&lt;tr id=&#x27;&quot; + fileInstance.get(&quot;id&quot;) + &quot;_row&quot; + &quot;&#x27;&gt;&quot; +
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   358
                                    &quot;&lt;td class=&#x27;filename&#x27;&gt;&quot; + fileInstance.get(&quot;name&quot;) + &quot;&lt;&#x2F;td&gt;&quot; +
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   359
                                    &quot;&lt;td class=&#x27;filesize&#x27;&gt;&quot; + fileInstance.get(&quot;size&quot;) + &quot;&lt;&#x2F;td&gt;&quot; +
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   360
                                    &quot;&lt;td class=&#x27;percentdone&#x27;&gt;Hasn&#x27;t started yet&lt;&#x2F;td&gt;&quot; +
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   361
                                    &quot;&lt;td class=&#x27;serverdata&#x27;&gt;&amp;nbsp;&lt;&#x2F;td&gt;&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   362
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   363
              perFileVars[fileInstance.get(&quot;id&quot;)] = {filename: fileInstance.get(&quot;name&quot;)};
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   364
                             });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   365
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   366
              uploader.set(&quot;postVarsPerFile&quot;, Y.merge(uploader.get(&quot;postVarsPerFile&quot;), perFileVars));
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   367
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   368
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   369
       uploader.on(&quot;uploadprogress&quot;, function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   370
            var fileRow = Y.one(&quot;#&quot; + event.file.get(&quot;id&quot;) + &quot;_row&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   371
                fileRow.one(&quot;.percentdone&quot;).set(&quot;text&quot;, event.percentLoaded + &quot;%&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   372
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   373
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   374
       uploader.on(&quot;uploadstart&quot;, function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   375
            uploader.set(&quot;enabled&quot;, false);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   376
            Y.one(&quot;#uploadFilesButton&quot;).addClass(&quot;yui3-button-disabled&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   377
            Y.one(&quot;#uploadFilesButton&quot;).detach(&quot;click&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   378
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   379
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   380
       uploader.on(&quot;uploadcomplete&quot;, function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   381
            var fileRow = Y.one(&quot;#&quot; + event.file.get(&quot;id&quot;) + &quot;_row&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   382
                fileRow.one(&quot;.percentdone&quot;).set(&quot;text&quot;, &quot;Finished!&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   383
                fileRow.one(&quot;.serverdata&quot;).setHTML(event.data);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   384
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   385
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   386
       uploader.on(&quot;totaluploadprogress&quot;, function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   387
                Y.one(&quot;#overallProgress&quot;).setHTML(&quot;Total uploaded: &lt;strong&gt;&quot; + event.percentLoaded + &quot;%&quot; + &quot;&lt;&#x2F;strong&gt;&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   388
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   389
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   390
       uploader.on(&quot;alluploadscomplete&quot;, function (event) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   391
                     uploader.set(&quot;enabled&quot;, true);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   392
                     uploader.set(&quot;fileList&quot;, []);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   393
                     Y.one(&quot;#uploadFilesButton&quot;).removeClass(&quot;yui3-button-disabled&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   394
                     Y.one(&quot;#uploadFilesButton&quot;).on(&quot;click&quot;, function () {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   395
                          if (!uploadDone &amp;&amp; uploader.get(&quot;fileList&quot;).length &gt; 0) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   396
                             uploader.uploadAll();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   397
                          }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   398
                     });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   399
                     Y.one(&quot;#overallProgress&quot;).set(&quot;text&quot;, &quot;Uploads complete!&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   400
                     uploadDone = true;
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   401
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   402
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   403
       Y.one(&quot;#uploadFilesButton&quot;).on(&quot;click&quot;, function () {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   404
         if (!uploadDone &amp;&amp; uploader.get(&quot;fileList&quot;).length &gt; 0) {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   405
            uploader.uploadAll();
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   406
         }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   407
       });
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   408
   }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   409
   else {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   410
       Y.one(&quot;#uploaderContainer&quot;).set(&quot;text&quot;, &quot;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.&quot;);
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   411
   }
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   412
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   413
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   414
});
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   415
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   416
&lt;&#x2F;script&gt;</pre>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   417
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   418
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   419
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   420
            </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   421
        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   422
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   423
        <div class="yui3-u-1-4">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   424
            <div class="sidebar">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   425
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   426
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   427
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   428
                    <div class="sidebox">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   429
                        <div class="hd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   430
                            <h2 class="no-toc">Examples</h2>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   431
                        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   432
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   433
                        <div class="bd">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   434
                            <ul class="examples">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   435
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   436
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   437
                                        <li data-description="A simple multiple file uploader with progress tracking">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   438
                                            <a href="uploader-multiple.html">Simple Multiple Files Uploader with Progress Tracking</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   439
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   440
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   441
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   442
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   443
                                        <li data-description="A multiple file uploader with HTML5 Drag-and-Drop Support">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   444
                                            <a href="uploader-dd.html">Multiple Files Uploader with HTML5 Drag-and-Drop Support</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   445
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   446
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   447
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   448
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   449
                                        <li data-description="A multiple file uploader that submits additional POST vars with each file and receives data from the server">
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   450
                                            <a href="uploader-data.html">Multiple Files Uploader with POST Variables and Server Data Retrieval</a>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   451
                                        </li>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   452
                                    
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   453
                                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   454
                            </ul>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   455
                        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   456
                    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   457
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   458
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   459
                
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   460
            </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   461
        </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   462
    </div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   463
</div>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   464
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   465
<script src="../assets/vendor/prettify/prettify-min.js"></script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   466
<script>prettyPrint();</script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   467
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   468
<script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   469
YUI.Env.Tests = {
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   470
    examples: [],
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   471
    project: '../assets',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   472
    assets: '../assets/uploader',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   473
    name: 'uploader-data',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   474
    title: 'Multiple Files Uploader with POST Variables and Server Data Retrieval',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   475
    newWindow: '',
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   476
    auto:  false 
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   477
};
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   478
YUI.Env.Tests.examples.push('uploader-multiple');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   479
YUI.Env.Tests.examples.push('uploader-dd');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   480
YUI.Env.Tests.examples.push('uploader-data');
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   481
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   482
</script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   483
<script src="../assets/yui/test-runner.js"></script>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   484
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   485
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   486
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   487
</body>
89ef5ed3c48b Upgrades to yui 3.10.3
gibus
parents:
diff changeset
   488
</html>