docs/partials/uploader-multiple-source.mustache

	uploader-multiple-source.mustache revision c1cc0c913c4ed9ac3de73aaadd3d0db93d2240df


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<style type="text/css">

.progressbars {
    width:300px;
}

.yui3-progressbar {
    margin-bottom:3px;
    border: 2px solid #c4c4c4;
    border-radius:5px;
    -moz-border-radius: 5px;
    -webkit-border-radius:5px;
}
.yui3-progressbar .yui3-progressbar-content {
    background-color:#fff;
    position:relative;
/*  width: 200px; */
}
.yui3-progressbar .yui3-progressbar-label {
    position: absolute;
    top:1px;
    left:3px;
    font-size:11px;
    font-family:Arial,Helvetica,sans-serif;
}
.yui3-progressbar .yui3-progressbar-slider {
    background-color:#e0bb30;
    height: 15px;
    line-height: 29px;
    width: 0;
}

#selectFilesLink #selectLink,
#uploadFilesLink #uploadLink {
    color: #00c;
    text-decoration: underline;
}
</style>

<div id="uploaderContainer">
    <div id="uploaderOverlay" style="position:absolute; z-index:2"></div>
    <div id="selectFilesLink" style="z-index:1"><a id="selectLink" href="#">Select Files</a></div>
</div>
<div id="uploadFilesLink"><a id="uploadLink" href="#">Upload Files</a></div>

<div id="files">
  <table id="filenames" style="border-width:1px; border-style:solid; padding:5px;">
    <tr><td>Filename</td><td>File size</td><td>Percent uploaded</td></tr>
  </table>
</div>

<script>

YUI({gallery: 'gallery-2011.02.09-21-32'}).use("uploader", 'gallery-progress-bar', function(Y) {

var uploader;

function init () {

var overlayRegion = Y.one("#selectLink").get('region');
Y.log(overlayRegion);
Y.one("#uploaderOverlay").set("offsetWidth", overlayRegion.width);
Y.one("#uploaderOverlay").set("offsetHeight", overlayRegion.height);

var swfURL = Y.Env.cdn + "uploader/assets/uploader.swf";

if (Y.UA.ie >= 7) {
    swfURL += "?t=" + Y.guid();
}

uploader = new Y.Uploader({boundingBox:"#uploaderOverlay",
                           swfURL: swfURL});

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
}

Y.on("domready", init);


var setupUploader = function (event) {
    uploader.set("multiFiles", true);
    uploader.set("simLimit", 3);
    uploader.set("log", true);

    var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
                       {description:"Videos", extensions:"*.avi;*.mov;*.mpg"});

    uploader.set("fileFilters", fileFilters);
}

var fileSelect = function (event) {
    Y.log("File was selected, parsing...");
    var fileData = event.fileList;

    for (var key in fileData) {
        var output = "<tr><td>" + fileData[key].name + "</td><td>" + fileData[key].size + "</td><td><div id='div_" + fileData[key].id + "' class='progressbars'></div></td></tr>\n";
        Y.one("#filenames").append(output);

        var progressBar = new Y.ProgressBar({id:"pb_" + fileData[key].id, layout : '<div class="{labelClass}"></div><div class="{sliderClass}"></div>'});
        progressBar.render("#div_" + fileData[key].id);
        progressBar.set("progress", 0);
    }
}

var updateProgress = function (event) {
    var pb = Y.Widget.getByNode("#pb_" + event.id);
    pb.set("progress", Math.round(100 * event.bytesLoaded / event.bytesTotal));
}

var uploadComplete = function (event) {
    var pb = Y.Widget.getByNode("#pb_" + event.id);
    pb.set("progress", 100);
}

var uploadFile = function (event) {
    uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
}

Y.one("#uploadFilesLink").on("click", uploadFile);


});

</script>