plupload upload a single image file - file

Question

I have the following fiddle which I have been trying to modify:
Fiddle
I am trying to get this functionality:
1> User clicks pick image button and file is uploaded (working now)
2> User clicks pick image button again and existing file is replaced with new.
3> User clicks remove button and the file is removed.
I'm struggling to work out how to do this. The code looks like this:
$(document).ready(function() {
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight',
browse_button : 'pick-files',
max_file_size : '1mb',
multi_selection: false,
max_file_count: 1,
unique_names : true,
autostart: true,
url: "/echo/json",
flash_swf_url : 'http://rawgithub.com/moxiecode/moxie/master/bin/flash/Moxie.cdn.swf',
silverlight_xap_url : 'http://rawgithub.com/moxiecode/moxie/master/bin/silverlight/Moxie.cdn.xap',
filters : [
{title : "Image files", extensions : "jpg,png"}
],
init: {
PostInit: function() {
document.getElementById('pick-files').style.visibility = 'visible';
},
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
if(uploader.files.length > 1){
//uploader.removeFile(uploader.getFile(this.id));
console.log(file.id);
// return;
}
var img = new o.Image();
img.onload = function() {
// create a thumb placeholder
var li = document.createElement('li');
li.id = this.uid;
document.getElementById('gallery').appendChild(li);
// embed the actual thumbnail
this.embed(li.id, {
width: 100,
height: 60,
crop: true
});
};
img.load(file.getSource());
});
},
Error: function(up, err) {
document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
}
}
});
uploader.init();
});

Answer 1

I had a shot at this. You were on the right path but it looks like you were removing the file you were adding when there was already one in the queue. You also don't want to "return" when uploader.files.length > 1. That takes you out of the "each" and the rest of the code wasn't running.
The third part is to remove the file. For that I've bound the buttons click event to remove the file.
Here's a Fiddle.
And here are some relevant code snippets.
FilesAdded: function(up, files) {
plupload.each(files, function(file) {
if(uploader.files.length > 1){
removeImage(); //Call the removeImage() function and then continue
}
And then to remove the Image, this is what I've done.
uploader.init(); //<-- After initialising
document.getElementById('remove').onclick = function () {
removeImage();
};
function removeImage(){
if(uploader.files.length > 0){
uploader.removeFile(uploader.files[0].id);
document.getElementById('gallery').innerHTML = ''; //This will remove it from the page
}
}
That is just to quickly remove it for your case where there's only one picture. There may be better ways to reset the gallery but I've found that just calling removeFile doesn't remove it from the page, you need to reset the innerHTML or splice it from the list, etc.