Remove selected file(s) before upload with Javascript

FileList has no API to remove entries:

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

However you can reconstruct File uploader using XHR2 and AJAX and filter in content there. This implies doing XHR2 and AJAX upload and is not suitable for traditional <form> uploads.

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


If you are using a standard form with a set of standard file inputs then you can do it like this 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>