Yahoo! Developer Network Home - Help

YUI Library Examples: Uploader Control (experimental): Advanced Uploader Example

Uploader Control (experimental): Advanced Uploader Example

In this example, we will pair the YUI Uploader Control with the DataTable Control to give the user visual feedback on the progress of their file upload. When the user selects multiple files for upload, a DataTable will be populated with the list of files and their sizes. When the user starts the upload process, they'll see progress bars next to each of the files as they upload.

Note: The YUI Uploader Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the Adobe Flash Player Download Center.

Note: The YUI Uploader Control requires the uploader.swf Flash file that is distributed as part of the YUI package, in the uploader/assets folder. Copy the uploader.swf to your server and set the YAHOO.Uploader.SWFURL variable to its full path.

Note: This example requires a backend component to receive uploaded files. Download the source for this example below to use on your own server.

Download example source.

When you have the example running on your own server, it should look like the screenshot below:

Advanced Uploader Example Screenshot

Using Uploader with the DataTable Control to Handle Multi-file Uploads with Progress Feedback

Just as we did in the Simple Example, we start with including all the necessary files. We will need the base YUI files, as well as files specific to the Logger, Uploader, and DataTable.

1<html> 
2<head> 
3<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
4<title>Uploader With DataTable Example</title> 
5<!-- Required YUI files --> 
6<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/fonts/fonts-min.css" /> 
7<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/datatable.css" /> 
8<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
9<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta.js"></script> 
10 
11<!-- Required JSON files --> 
12<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/json/json-min.js"></script> 
13 
14<!-- Required Datasource and Datatable files --> 
15<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta.js"></script> 
16<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta.js"></script> 
17 
18<!-- Main Uploader script --> 
19<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/uploader/uploader-experimental.js"></script> 
20 
21<!-- Logger CSS and JS -->  
22<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logger.css">  
23<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/logger/logger-min.js"></script> 
24</head> 
25 
26<body class="yui-skin-sam"> 
view plain | print | ?

Next, just as we did in the Simple Example, we add a container div where the Uploader Control will be placed. If you don't want it to be visible, feel free to set the size of the container element to height:0; width:0 (with overflow:hidden). We also add the "Browse" and "Upload" buttons:

1<h1>Uploader With DataTable Example</h1> 
2 
3<div id="toBeReplaced" style="width:400px;height:210px"> 
4Unable to load Flash content. You can download the latest version of Flash Player from the  
5<a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>. 
6</div> 
7<input id="browseBtn" name="browse" value="Browse for Images" onclick="browse()" type="button" /> 
8<input id="uploadBtn" name="upload" value="Upload Selected" onclick="upload()" type="button" /> 
view plain | print | ?

We also need to put in one additional placeholder div into which we'll render the DataTable:

1<div id="single" style="margin-top:2em;"></div> 
view plain | print | ?

Next, we initialize the Logger and the Uploader, and place them on the page. We'll also initialize an uploadCounter that we will use to upload the files one at a time, a fileIdHash to keep the record between rows of the DataTable and the file ids, and a dataArr where we'll hold the necessary file information (we'll also use it to instantiate the DataTable).

1this.myLogReader = new YAHOO.widget.LogReader(); 
2 
3YAHOO.widget.Uploader.SWFURL = "http://yui.yahooapis.com/2.5.2/build/uploader/assets/uploader.swf"; 
4 
5var uploader = new YAHOO.widget.Uploader( "toBeReplaced" ); 
6uploader.addListener('fileSelect',onFileSelect); 
7uploader.addListener('uploadComplete',onUploadComplete); 
8uploader.addListener('uploadProgress',onUploadProgress); 
9uploader.addListener('uploadStart',onUploadStart); 
10var uploadCounter = 0; 
11var fileIdHash; 
12var dataArr; 
view plain | print | ?

In the browse() function, we clear the file list, and call the uploader.browse function, passing true as the first argument (which means the user will be able to select multiple files by holding the Shift button). We also pass the file extension filter array, allowing for three types of image files:

1function browse() { 
2  uploader.clearFileList(); 
3  uploader.browse(true, [{description:"Images", extensions:"*.jpg;*.png;*.gif"}]); 
4} 
view plain | print | ?

Once we have received the list of files from the onFileSelect function (defined below), we will call the createDataTable function that will populate our variables, create a new DataSource based on the file list, and create the DataTable to display it:

1function createDataTable(entries) { 
2  rowCounter = 0; 
3  fileIdHash = []; 
4  dataArr = []; 
5  for(var i in entries) { 
6     var entry = entries[i]; 
7     dataObj = {}; 
8 
9     for (var j in entry) { 
10        dataObj[j] = entry[j]; 
11     } 
12     dataArr.push(dataObj); 
13     fileIdHash[dataObj["id"]] = rowCounter; 
14     rowCounter++; 
15  } 
16   
17  this.allData = {data: dataArr}; 
18 
19    var myColumnDefs = [ 
20        {key:"name", label: "File Name", sortable:true}, 
21     {key:"size", label: "Size", sortable:true}, 
22     {key:"progress", label: "Upload progress", sortable:false} 
23    ]; 
24  this.myDataSource = new YAHOO.util.DataSource(this.allData); 
25  this.myDataSource.dataType = YAHOO.util.DataSource.TYPE_JSARRAY; 
26  this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON; 
27  this.myDataSource.responseSchema = { 
28        resultsList: "data", 
29        fields: ["id","name","created","modified","type", "size", "progress"] 
30  }; 
31   
32  this.singleSelectDataTable = new YAHOO.widget.DataTable("single", 
33           myColumnDefs, this.myDataSource, { 
34               caption:"Files To Upload", 
35               selectionMode:"single" 
36           }); 
37} 
view plain | print | ?

In the upload function, we initiate the upload of the file that's indicated by the uploadCounter. The uploadCounter is incremented every time a preceding upload is complete (see onUploadComplete below):

1function upload() { 
2  YAHOO.log(dataArr); 
3  var idToUpload = dataArr[uploadCounter]["id"]; 
4  uploader.upload(idToUpload, 'YOUR UPLOAD URL HERE'); 
5  document.getElementById('uploadBtn').disabled = true; 
6} 
view plain | print | ?

When we receive the uploadProgress event, we need to update the corresponding row of the DataTable. We use a simple HTML horizontal rule as a progress bar and update its width based on the progress of the upload:

1function onUploadProgress(event) { 
2  rowNum = fileIdHash[event["id"]]; 
3  prog = Math.round(100*(event["bytesLoaded"]/event["bytesTotal"])); 
4  progbar = "<hr style=\"color: #f00; background-color: #f00; text-align:left; margin: 0 auto 0 0; height: 5px; width: " + prog + "px\"/>"; 
5  singleSelectDataTable.updateRow(rowNum, {name: dataArr[rowNum]["name"], size: dataArr[rowNum]["size"], progress: progbar}); 
6} 
view plain | print | ?

When files are selected, we call createDataTable (described above):

1function onFileSelect(event) { 
2  fileList = event.fileList; 
3  YAHOO.log(event); 
4  createDataTable(fileList); 
5} 
view plain | print | ?

After the start of each file upload, it may be awhile before the first uploadProgress event comes in. Thus, we want the user know that the upload has started. On the uploadStart event, we update the respective row of the DataTable to reflect that the upload is in progress:

1function onUploadStart(event) { 
2  YAHOO.log(event); 
3  rowNum = fileIdHash[event["id"]]; 
4  singleSelectDataTable.updateRow(rowNum, {name: dataArr[rowNum]["name"], size: dataArr[rowNum]["size"], progress: "Starting..."});       
5} 
view plain | print | ?

Finally, when the upload is complete, we either initiate the next upload, or, if the uploadCounter has equalized with the number of files, we send an appropriate message to the Logger and halt:

1function onUploadComplete(event) { 
2  YAHOO.log(event); 
3  rowNum = fileIdHash[event["id"]]; 
4  progbar = "<hr style=\"color: #f00; background-color: #f00; text-align:left; margin: 0 auto 0 0; height: 5px; width: 100px\"/>"; 
5  singleSelectDataTable.updateRow(rowNum, {name: dataArr[rowNum]["name"], size: dataArr[rowNum]["size"], progress: progbar}); 
6   
7  if (uploadCounter < dataArr.length - 1) { 
8     uploadCounter++; 
9     upload(); 
10  } 
11  else { 
12     YAHOO.log("All files uploaded!"); 
13  } 
14} 
view plain | print | ?

Uploader Control (experimental) Examples:

More Uploader Control (experimental) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings