Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to remove file details from multi array

Im display all the files in a div which is coming in an array upfiles . Using each in jquery displaying all the files with delete button, when i click on the delete button that respective file details should be deleted from an array.

Here is the jquery code each loop which im tring to delete file details from array

var int_loop =  1;
        var display_removebutton="";
    $(upfiles).each(function(index, file) 
        {
            if(total_size > 1000) // size limit comparision
                 display_removebutton = "<img width='20px' style='cursor:pointer;' height='20px' id='remove_"+int_loop+"' src='images/DeleteRed.png' />"
            size = Math.round( file.size / 1024 );
            if(size > 1000)
            {
                if(size > 1024) 
                    size_display =  Math.round(size / 1024 * 100)/100 + ' mb';
                else
                    size_display = size + ' kb';    
                alert(file.name+"("+size+")"+" will be removed atomatically from list. As it exceeds limit.");
            }
            if(size > 1024) 
                    size_display =  Math.round(size / 1024 * 100)/100 + ' mb'; // converted to mb
            else
                    size_display = size + ' kb';    
            $('#total').append("<div id='div_selec"+int_loop+"'><b>File Name :</b> "+file.name + "<b> Size:</b>" + size_display + display_removebutton + "</div>" ); 
            $("#remove_"+int_loop).click(function() {

                var curr_id = this.id;
                var id = curr_id.substr(7);
                alert(id+'file name '+file.name);
               $("#div_selec"+id).empty();
                   upfiles.splice(index, 1) //updated as the suggested in comment
//                    delete upfiles[id];
                alert(upfiles.length);

            });
             int_loop++;
    });

Edited 1:

Actually im implementing drag and drop file upload in jquery php. In validation if total size of all files is greater than 1000kb im displaying delete button, which user has to delete some of the files

Edited 2 :

Im getting this error in console log : TypeError: upfiles.splice is not a function

Edited 3 :

upfiles is coming from this jquery drop event:

$( '#total' ).bind( 'drop',function(event) {

        event.stopPropagation();    
        event.preventDefault();

        if( upfiles == 0 )
                {
                upfiles = event.originalEvent.dataTransfer.files;

                                console.log(upfiles); // in this console log it is displaying `FileList [File, File, File, File, File, File, File]` File is nothing but the files which i have dropped in a div
                }
        else {
            if(confirm( "Drop: Do you want to clear files selected already?" ) == true) {
                upfiles = event.originalEvent.dataTransfer.files;
                $( '#fileToUpload' ).val('');
            }
            else
                return;
        }
        $( "#fileToUpload" ).trigger( 'change' );
});
like image 929
fedrick Avatar asked Jun 12 '14 04:06

fedrick


1 Answers

splice is not defined because upfiles is of type FileList and the prototype of FileList doesn't define it. However you can convert any array-like object to an array using var array = Array.prototype.slice.call(arrayLikeObject, 0). Now array has splice and all other array methods. See http://jsfiddle.net/8e2s7/1/ for a short example.

like image 192
Johannes Egger Avatar answered Sep 29 '22 03:09

Johannes Egger