title: How to add a file in FileList
body: <h1>Please help me on this:</h1>
  <p><strong>Update :</strong> <em><strong>In console log it is showing as merged but length is still showing the last dragged length</strong></em></p>
  <p>Im using <code>up_files = event.originalEvent.dataTransfer.files;</code> to capture the files that are dragged and dropped in a div.</p>
  <p>For the first time when the user dragged the files , all the files are moving to <code>up_files</code> 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 <code>upfiles</code></p>
  <pre><code>#fileToUpload is a input file id
  #total is div id
  </code></pre>
  <p>sample code :</p>
  <pre><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
                            }
  $( &quot;#fileToUpload&quot; ).trigger( 'change' );
  });
  </code></pre>
  <p><strong>Edited :</strong>
  Here is the on change:</p>
  <pre><code>$( &quot;#fileToUpload&quot; ).change( function() {
            
               $('#total').css(&quot;background-image&quot;,&quot;&quot;);
               
                  var fileIn = $( &quot;#fileToUpload&quot; )[0];
                  if(!upfiles) 
                  {
                      upfiles = fileIn.files; 
                      upfiles = Array.prototype.slice.call(upfiles, 0);
                  }
                  else {
                          if(fileIn.files.length &gt; 0 ) {
                                  if( confirm( &quot;Drop: Do you want to clear files selected already?&quot; ) == true )
                                  {
                                          upfiles = fileIn.files; 
                                          upfiles = Array.prototype.slice.call(upfiles, 0);
                                  }
                                  else 
                                          return; 
                          }
  
  //DISPLAYING FILE HERE USING EACH LOOP 
                  } });
  </code></pre>
  <p><strong>Updated :</strong></p>
  <p>I have tried like this:</p>
  <pre><code>$( '#total' ).bind( 'drop',function(event) {
             
    event.stopPropagation();  
    event.preventDefault();
    alert(&quot;hello&quot;+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(&quot;hello world&quot;);
     // 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);
      }
          $( &quot;#fileToUpload&quot; ).trigger( 'change' );
     });
  </code></pre>
  <p>I think im nearer.. can any one suggest any modification</p>