Delete selected file before downloading using Javascript

Question

Let's say I have a form that allows users to upload multiple images that are added with the option to delete them if they do not want to upload this particular photo.

Is it possible to delete a value from a file object of the one that they deleted (for example, do not want to download)?

Answer 1

FileList does not have an API to delete entries:

https://developer.mozilla.org/en/DOM/FileList

However, you can restore the file downloader using XHR2 and AJAX and filter the content there. This implies loading XHR2 and AJAX and is not suitable for traditional <form> downloads.

https://developer.mozilla.org/en/Using_files_from_web_applications

Answer 2

If you use a standard form with a set of standard input files, you can do it as follows http://jsfiddle.net/thXre/

 $(document).ready(function(){ $('.remove').click(function(){ $(this).closest('div').slideUp('slow', function(){$(this).remove();}); }); });​ 

and html code:

 <div> <input type='file' name='files[]'> <img src='x.gif' class='remove'> </div> <div> <input type='file' name='files[]'> <img src='x.gif' class='remove'> </div> <div> <input type='file' name='files[]'> <img src='x.gif' class='remove'> </div> 

Answer 3

Libraries are your best bet before we get the standard API ...

• FineUploader Demo . Has file deletion, image preview, file rename.

• bluimp jQuery File Upload Plugin . Demo It has file deletion, image preview, individual file download, cancellation of download.

They are also available at https://cdnjs.com/