<style type="text/css">
.uploadButton a {
display:block;
width:100px;
height:40px;
text-decoration: none;
}
.uploadButton a {
background: url("{{componentAssets}}/uploadFileButton.png") 0 0 no-repeat;
}
.uploadButton a:visited {
background-position: 0 0;
}
.uploadButton a:hover {
background-position: 0 -40px;
}
.uploadButton a:active {
background-position: 0 -80px;
}
</style>
<div id="selectButton" style="width:100px;height:40px"></div>
<div class="uploadButton"><a href="#" id="uploadButtonLink"></a></div>
<div id="filename">
File selected:
</div>
<div id="percent">
Percent uploaded:
</div>
<script>
YUI({filter:"raw"}).use('uploader-deprecated', function(Y) {
{{#if dist}}
var swfURL = {{yuiLocalBuildUrl}}/uploader-deprecated/assets/uploader.swf;
{{else}}
var swfURL = Y.Env.cdn + "uploader-deprecated/assets/uploader.swf";
{{/if}}
if (Y.UA.ie >= 6) {
swfURL += "?t=" + Y.guid();
}
var uploader = new Y.Uploader({boundingBox:"#selectButton",
buttonSkin:"{{componentAssets}}/selectFileButton.png",
transparent: false,
swfURL: swfURL
});
uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
Y.one("#uploadButtonLink").on("click", uploadFile);
function setupUploader (event) {
uploader.set("multiFiles", false);
uploader.set("log", true);
var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
{description:"Videos", extensions:"*.avi;*.mov;*.mpg"});
uploader.set("fileFilters", fileFilters);
}
function fileSelect (event) {
var fileData = event.fileList;
for (var key in fileData) {
var output = "File selected: " + fileData[key].name;
Y.one("#filename").setContent(output);
}
}
function updateProgress (event) {
Y.one("#percent").setContent("Percent uploaded: " + Math.round((100 * event.bytesLoaded / event.bytesTotal)) + "%");
}
function uploadComplete (event) {
Y.one("#percent").setContent("Upload complete!");
}
function uploadFile (event) {
}
});
</script>