Remove selected file(s) before upload with Javascript

Question

Say I have a form that allows users to upload multiple images, which are appended with an option to remove them if they don't want to upload that particular photo.

Is it possible to remove the value from the files object of the one that they removed (e.g. didn't want to upload)?

Did you try to remove ``? If, of course, your form consists of a set of the standard file inputs. — Cheery, Feb 18 '12 at 04:13
Possible duplicate of [How to remove one specific selected file from input file control](https://stackoverflow.com/questions/19060378/how-to-remove-one-specific-selected-file-from-input-file-control) — Endless, Dec 09 '17 at 12:57

score 5 · Accepted Answer · answered Feb 18 '12 at 01:52

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

Ciro Santilli OurBigBook.com · Answer 2 · 2016-02-27T10:56:23.737

1

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

FineUploader. Demo. Has file delete, image preview, file rename.
bluimp's jQuery File Upload Plugin. Demo. Has file delete, image preview, individual file upload, upload undo.

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

edited Feb 27 '16 at 10:56

answered Nov 08 '14 at 08:50

Ciro Santilli OurBigBook.com

347,512
102
1,199
985

6

2 years later... FileList still doesn't in any way shape or form support removing entries within its API. – bob_cobb Nov 09 '14 at 05:23
1

@bob_cobb it's a sad future =) – Ciro Santilli OurBigBook.com Nov 09 '14 at 06:59
Future's here, still looking for a proper way to remove a file ─ doesn't seems to have one yet. – jbalintac Mar 27 '17 at 14:17

score 1 · Answer 3 · answered Feb 18 '12 at 04:23

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>

Thanks, I know how to remove the actual elements, but it's removing them from being included in the upload that I was interested in which FileList takes care of. — bob_cobb, Feb 18 '12 at 05:53

Remove selected file(s) before upload with Javascript

3 Answers3

Linked

Related