How to get plupload to remove a file from queue?

Question

I have literally been trying to figure this out for the past 5 hours.

I have tried countless methods that I have found online and none have worked. So far, this method worked the best(only shows one error).

The error that I get is: "Uncaught ReferenceError: deletefile is not defined" Please note that the error only occurs when I click the "Remove" hyperlink.

//UPLOAD CODE
$(document).ready(function() {
// Custom example logic
function $(id) {
    return document.getElementById(id);
}


var uploader = new plupload.Uploader({
    runtimes : 'gears,html5,flash,silverlight,browserplus',
    browse_button : 'pickfiles',
    container: 'container',
    drop_element: 'uploadBox',
    max_file_size : '10mb',
    url : 'upload.php',
    flash_swf_url : '../js/plupload/plupload.flash.swf',
    silverlight_xap_url : '../js/plupload/plupload.silverlight.xap',
    filters : [
        {title : "Image files", extensions : "jpg,gif,png"},
        {title : "Zip files", extensions : "zip"}
    ]


    //,
    //multipart_params : {
    //  "title" : $("#title").val(),
    //  "descripition" : $("#description").val()
        //}
});

uploader.bind('Init', function(up, params) {
    if (uploader.features.dragdrop) {
        var target = $("uploadBox");

        target.ondragover = function(event) {
            event.dataTransfer.dropEffect = "move";
            this.className = "dragover";
        };

        target.ondragenter = function() {
            this.className = "dragover";
        };

        target.ondragleave = function() {
            this.className = "";
        };

        target.ondrop = function() {
            this.className = "";
        };
    }
});

uploader.bind('FilesAdded', function(up, files) {
    function deletefile(i) {
        uploader.splice(i,1);
    }
    for (var i in files) {
        $('filelist').innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <a href="#" onclick="deletefile(\'' + i + '\');">Remove</a><b></b></div>';
    }
});

uploader.bind('UploadProgress', function(up, file) {
    $(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});

$('uploadfiles').onclick = function() {
    uploader.start();
    return false;
};

uploader.init();
});

Thanks.

Answer 1

Assuming filelist is an id (so, using $('#filelist')), you may try to replace this :

uploader.bind('FilesAdded', function(up, files) {
    function deletefile(i) {
        uploader.splice(i,1);
    }
    for (var i in files) {
        $('filelist').innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <a href="#" onclick="deletefile(\'' + i + '\');">Remove</a><b></b></div>';
    }
});

with this :

uploader.bind('FilesAdded', function(up, files) {
var deleteHandle = function(uploaderObject, fileObject) {
        return function(event) {
            event.preventDefault();
            uploaderObject.removeFile(fileObject);
            $(this).closest("div#" + fileObject.id).remove();
        };
    };

    for (var i in files) {
        $('#filelist').append($('<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <a href="#" id="deleteFile' + files[i].id + '">Remove</a></div>'));
        $('#deleteFile' + files[i].id).click(deleteHandle(up, files[i]));
    }    
});

I also suppose $('uploadfiles') should be $('#uploadfiles') but it is out of scope of the question. Hope this will help.