title: Removing a file in modern browsers
body: <h2>Problem</h2>
  
  <p>I am currently using ( <a href="https://github.com/blueimp/jQuery-File-Upload/wiki" rel="nofollow">https://github.com/blueimp/jQuery-File-Upload/wiki</a> ) this jQuery HTML5 Uploader.
  The basic version, no ui.</p>
  
  <p>The big problem is, that I looked everywhere (Mozilla Developer Network, SO, Google, etc.) and found no solution for removing a files already added via dragNdrop or manually via the file input dialogue.</p>
  
  <p>Why do I want to achieve removing a file?
  Because it seems that HTML5 has a kind of "bug".
  If you drop / select a file (file input has set multiple) upload it, and then drop / select another file you magically have now the new file twice and it gets uploaded twice.</p>
  
  <p>To prevent this magic file caching the use would have to refresh the page, which is not what someone wants to have for his modern AJAX web app.</p>
  
  <p>What I have tried so far:</p>
  
  <ul>
  <li>.reset()</li>
  <li>.remove()</li>
  <li>Reset Button</li>
  <li>Setting .val() to ''</li>
  </ul>
  
  <p>This seems to be a general HTML5 JS problem not jQuery specific.</p>
  
  <h2>Theory</h2>
  
  <p><strong>Might it be, that <code>$j('#post').click</code> (I bind / re-bind a lot of times different callbacks), stacks the callbacks methods so that each time the updateFileupload function is called an additional callback is set.
  The actual problem would now not rely anymore on the HTML5 upload, it would now rely on my could, miss-binding the .click action on my submit button (id=#post).
  If we now call .unbind before each .click there shouldn't be any duplicated callback binding.</strong></p>
  
  <h2>Code</h2>
  
  <p>Function containing the upload code:</p>
  
  <pre><code>function updateFileupload (type) {
              var destination = "";
  
              switch(type)
              {
                  case upload_type.file:
                      destination = '/wall/uploadfile/id/&lt;?=$this-&gt;id?&gt;';
                      break;
                  case upload_type.image:
                      destination = '/wall/upload/id/&lt;?=$this-&gt;id?&gt;';
                      break;
              }
  
              $j('#fileupload').fileupload({
                  dataType: 'json',
                  url: destination,
                  singleFileUploads: false,
                  autoUpload: false,
                  dropZone: $k(".dropZone"),
                  done: function (e, data) {
                      console.log("--:--");
                      console.log(data.result);
                      upload_result = data.result;
                      console.log(upload_result);
                      console.log("--:--");
                      console.log(type);
                      if(type == upload_type.image)
                      {
                          var imageName = upload_result.real;
                                          console.log(imageName);
                                          $k.get('/wall/addpicture/id/&lt;?=$this-&gt;id ?&gt;/name'+imageName, function(data){
                                                  if(data &gt; 0){
                                                          console.log("I made it through!");
                                                          if(!data.id)
                                                          {
                                                              $k('#imgUpload').html(''); 
                                                              //$k('#imgPreview').fadeOut(); 
                                                              $k('#newPost').val('');
                                                              $k.get("/wall/entry/id/"+data, function(html){
                                                                      $k('#postList').prepend(html);
  
                                                              }); 
                                                          }
                                                  }
                                          });
                      }
                    },
                  send: function(e, data){
  
                          var files = data.files;
                          var duplicates = Array(); // Iterate over all entries and check whether any entry matches the current and add it to duplicates for deletion
  
                          for(var i=0; i&lt;data.files.length;i++)
                          {
                              for(var j=0;j&lt;data.files.length-1;j++)
                              {
                                  if(files[i].name == files[j].name &amp;&amp; i != j)
                                  {
                                      duplicates.push(j);
                                  }
                              }
  
                          }
                          if(duplicates.length &gt; 0)
                          {
                              for(var i=0;i&lt;duplicates.length;i++)
                                  files.splice(i, 1);
                          }
  
                          console.log("Duplicates");
                          console.log(duplicates);
                  },
                  drop: function(e, data){
                      console.log("outside");
  //                    $k.each(data.files, function(index, file){
  //                            $k('#imageListDummy').after('&lt;li class="file-small-info-box"&gt;'+file.name+'&lt;/li&gt;');
  //                            console.log(file);
  //                            
  //                        });
                  },
                  add: function(e, data){
  
                          upload_data = data;
  
                          console.log(data);
                          $k.each(data.files, function(index, file){
                              $k('#imageListDummy').after('&lt;li class="file-small-info-box"&gt;'+file.name+'&lt;/li&gt;');
                              console.log(file);
  
                          });
                          $j('#post').click(function(event){
                                      upload_data.submit();
  
                                      if(type == upload_type.image)
                                      {
                                          var file = upload_data.files[0];
                                          console.log("I am here");
                                          console.log(file);
                                          var img = document.createElement("img");
  
  
                                          img.src = window.URL.createObjectURL(file);
                                          img.height = 64;
                                          img.width = 64;
                                          img.onload = function(e) {  
                                              window.URL.revokeObjectURL(this.src);  
                                          }
                                          document.getElementById('imgPreview').appendChild(img);
  
  
                                          $k('#imgPreview').show();
                                      }
                                      clickPostCallback(event);
  
  
                                     });
                          $j('#showSubmit').show();
                      }
  
                  });
          }
  </code></pre>