CODEWITHSUNDEEP
javascriptjqueryfile-uploadplupload
Olokoo
Olokoo

Reputation: 1144

How to get plupload to remove a file from queue?

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.

Upvotes: 3

Views: 10020

Answers (3)

Bikesh M
Bikesh M

Reputation: 8373

uploader=newplupload.Uploader({
//-----
});

uploader.bind('FilesAdded',function(up,files)
{
//----
up.refresh();//RepositionFlash/Silverlight
});

uploader.bind('QueueChanged',function(up,files){

 //#doc-filelist is the id of dive, which shows the Queue
$('#doc-filelist').html('');

$.each(uploader.files,function(i,file){
$('#doc-filelist').append(
'<divid="'+file.id+'">'+
file.name+'('+plupload.formatSize(file.size)+')<b></b>'+
'<spanclass="remove_file"data-file="'+i+'">X</span>'+
'</div>');
});

if(uploader.files.length==0){
$('#uploadfiles').addClass('disabled');
}

//console.log(uploader.files);
});

 uploader.bind('UploadComplete', function (up, file) {
    up.splice();
    up.refresh();

}); 


$('.relevant-document').on('click','.remove_file',function(e){

uploader.splice($(this).attr('data-file'),1);

uploader.refresh();
});

Upvotes: 0

Dos
Dos

Reputation: 861

// jquery plugin
uploader.plupload('getUploader').splice();
$('.plupload_filelist_content', uploader).empty();

Upvotes: 0

jbl
jbl

Reputation: 15413

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.

Upvotes: 3

Related Questions