Hello,
Thanks for the work on plupload. It rocks.
I have given a try on displaying thumbnails with the HTML5 runtimes and may be it will be useful to someone. So my first post will be a long post.
Like shown by langdon, I began with putting my hands on the raw file :
langdon wrote:plupload.html5.js:234 to do:
var f = new plupload.File(id, file.fileName || file.name, file.fileSize || file.size);
f.nativeFile = file;
files.push(f);
}}}
The advices on the URL did not work for me so I get the solution from another post in the forum (http://www.plupload.com/punbb/viewtopic.php?id=71)
So here is the code on the page with the pluploader:
$(function() {
$("#uploader").plupload({
// General settings
...
// Post init events, bound after the internal events
init: {
FilesAdded: function (up, files){
plupload.each(files, function(file) {
try {
// create an img element to load the image
var img = document.createElement("img");
img.file = file.nativeFile;
var reader = new FileReader();
// load it asynchronaly
reader.onload = (function(aImg, aFile) {
return function(e) {
// thumbnail is built up, we can play with it now
aImg.src = e.target.result;
aFile.url = e.target.result; // like keeping its url for further usage
aFile.img = aImg; // or keeping the img entirely
$("#"+ file.id +" img.preview").attr("src", e.target.result); // or something else
}; })(img, file);
reader.readAsDataURL(file.nativeFile);
} catch (e) { if (window.console) window.console.log(e.toString());}
});
}
}
});
});
As you can see, the thumbnail may be used in lots of way once it is loaded. For my part, I wanted to display it on the plupload UI at the beginning of the line containing the file name, file size and so on.
The matter with doing it dymically with full JS in the FilesAdded callback is that any refresh or later action on the UI will redisplay all lines and loose the thumbnails...
So I added a bit of code on jquery.ui.plupload.js to add an holder for the thumbnail. This bit of code has a <td> containing the img for the thumbnail. Default img will be a loading.gif.
jquery.ui.plupload.js: ~562
// open new line
var file_html = '<tr class="ui-state-default plupload_file" id="' + file.id + '">';
// if the file has no url (thumbnail not yet loaded in the HTML above)
// do add a a loading gif
if (!file.url)
file.url = '/path/to/js/jquery.plupload.queue/img/throbber.gif';
// back to the standard code to finish the HTML for the line
file_html += '<td class="plupload_preview"><img height="40px" class="preview" src="'+ file.url +'" /></td>' +
'<td class="plupload_cell plupload_file_name"><span>' + file.name + '</span></td>' +
'<td class="plupload_cell plupload_file_status">' + file.percent + '%</td>' +
'<td class="plupload_cell plupload_file_size">' + plupload.formatSize(file.size) + '</td>' +
'<td class="plupload_cell plupload_file_action"><div class="ui-icon"></div>' + fields + '</td>' +
'</tr>';
filelist.append(file_html);
A bit of styling within the uploader page. And all is fine, I got my lines with loading gif which get replaced by thumbnails when built up.
.plupload_preview { padding: 2px; width: 60px; }
.img_preview { height: 40px; }
So it works well enough except that the "thumbnail" is artificially resized by css...
But it still weight the initial size of the image.. and that does slow down the browser with a few photos of several Mo..
So I suppose you should apply the resize before hand to use it for the thumbnail... or just make a specific scale for the thumbnail but I must admit I am a bit lost within the different files and hooks and can not do it properly...
So if anyone interested... feel free to give a go and post back 
Manu