How to add a file in FileList

Question

Please help me on this:

Update : In console log it is showing as merged but length is still showing the last dragged length

Im using up_files = event.originalEvent.dataTransfer.files; to capture the files that are dragged and dropped in a div.

For the first time when the user dragged the files , all the files are moving to up_files and the second time if again the files are dropped in a div how can i push those to existing array list instead of clearing the array and insert to upfiles

#fileToUpload is a input file id
#total is div id

sample code :

$( '#total' ).bind( 'dragover',function(event) {
                event.stopPropagation();    
                event.preventDefault(); 
        });

  $( '#total' ).bind( 'drop',function(event) {
                        event.stopPropagation();    
                        event.preventDefault();
                        if( upfiles == 0 )
                        {
                                upfiles = event.originalEvent.dataTransfer.files;
                                upfiles = Array.prototype.slice.call(upfiles, 0);
                        }
                        else
                          {
                                     //push the file here
                          }
$( "#fileToUpload" ).trigger( 'change' );
});

Edited : Here is the on change:

$( "#fileToUpload" ).change( function() {

             $('#total').css("background-image","");

                var fileIn = $( "#fileToUpload" )[0];
                if(!upfiles) 
                {
                    upfiles = fileIn.files; 
                    upfiles = Array.prototype.slice.call(upfiles, 0);
                }
                else {
                        if(fileIn.files.length > 0 ) {
                                if( confirm( "Drop: Do you want to clear files selected already?" ) == true )
                                {
                                        upfiles = fileIn.files; 
                                        upfiles = Array.prototype.slice.call(upfiles, 0);
                                }
                                else 
                                        return; 
                        }

//DISPLAYING FILE HERE USING EACH LOOP 
                } });

Updated :

I have tried like this:

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

  event.stopPropagation();  
  event.preventDefault();
  alert("hello"+upfiles_new);
  if( upfiles_new == 0 )
  {
     upfiles_new = event.originalEvent.dataTransfer.files;
     console.dir(upfiles_new);
     upfiles = Array.prototype.slice.call(upfiles_new, 0);
  }
 else {
     alert("hello world");
   // console.dir(upfiles_new);
     upfiles_temp = event.originalEvent.dataTransfer.files;
     var upfiles = $.merge(upfiles_temp, upfiles_new)
     console.dir(upfiles);   // in console log it is merged
    upfiles = Array.prototype.slice.call(upfiles, 0); // but in this array it is not  showing
   alert(print_r(upfiles)); 
     console.dir(upfiles);
    }
        $( "#fileToUpload" ).trigger( 'change' );
   });

I think im nearer.. can any one suggest any modification