Databases
StackOverflow2013
Postsdbo
PORemoving a file in modern browsers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORemoving a file in modern browsers
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload