multiple file upload with delete feature

Question

I'm trying to build a multiple file upload with delete feature - something like this image:

I followed this JS Fiddle example. I am trying to remove the button with id attribute uploadBtn and use native browser file input (for the upload).

So far I have this code:

HTML

<input type="file" id="uploadFile" name="FileUpload"  multiple="multiple"/>
<div id="upload_prev"></div>

JavaScript

$(document).on('click','.close',function(){
    $(this).parents('span').remove();

})

$('#uploadFile').on('change', function() {

    var filename = this.value;
    var lastIndex = filename.lastIndexOf("\\");
    if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
    }
    var files = $('#uploadBtn')[0].files;
    for (var i = 0; i < files.length; i++) {
     $("#upload_prev").append('<span>'+'<div class="filenameupload">'+files[i].name+'</div>'+'<p class="close" >X</p></span>');
    }    
}

CSS

.filenameupload {
    width:98%;  
}

#upload_prev {
    border:thin solid #000;
    width: 65%;
    padding:0.5em 1em 1.5em 1em;
}

#upload_prev span {
    display: flex;
    padding: 0 5px;
    font-size:12px;
}

But this can't list the file name with remove feature. what can I correct here?

you didn't copy correctly the example, just replace `$('#uploadFile').on('change'` by `$('#uploadBtn').on('change'` — Olivier Boissé, Feb 07 '17 at 16:37
@oliv37 I'm trying to remove this `uploadBtn` and use default upload file input — kez, Feb 07 '17 at 16:40
ok so replace this line `var files = $('#uploadBtn')[0].files;` by `var files = $('#uploadFile')[0].files;` — Olivier Boissé, Feb 07 '17 at 16:44
@oliv37 once I removing the files one by one, its not changing how many files i selected in first place, can u suggest something when removing files how many files remaining — kez, Feb 07 '17 at 16:55
can you show us a jsfiddle because I don't really see what is the problem — Olivier Boissé, Feb 07 '17 at 16:59
@oliv37 this is the js fiddle http://jsfiddle.net/kezputha/nLpth3ta/3/ ,once I remove files , its not changing the how many files currently remaining — kez, Feb 07 '17 at 17:21

score 0 · Answer 1 · answered Feb 07 '17 at 16:32

0

You are trying to set value for an input type="file", which is wrong & It breaks there.

You should create one input type="text" and play around that.

answered Feb 07 '17 at 16:32

Parth Ghiya

6,929
2
30
37

score 0 · Answer 2 · edited May 23 '17 at 12:01

A couple of changes here:

Wait until the DOM is loaded with .ready() before adding event handlers.
```
$(document).ready(function(readyEvent) {
    //setup observers
```
Accept the change event argument in the change handler, then use event.target.files instead of $('#uploadBtn')[0].files;. Read more about this in the passing data section of .on().
```
$('#uploadFile').on('change', function(changeEvent) {
     var files = changeEvent.target.files;
```

See it in this modified plunker.

Edit:

You asked in comments about how to remove an item from the list ("once I removing the files one by one, its not changing how many files i selected in first place, can u suggest something when removing files how many files remaining")

Refer to this answer:

"If you want to delete only several of the selected files: you can't. The File API Working Draft you linked to contains a note:"

The HTMLInputElement interface [HTML5] has a readonly FileList attribute, […] [emphasis mine]

So you could clear the entire list, but not an individual item.

$(document).on('click', '.close', function(closeEvent) {
    $(this).parents('span').remove();
    var fileInput = $('#uploadFile')[0];

    //clear all selected files from the file input field
    fileInput.value = '';
}

Another option would be to start uploading files in the change event, and after each upload completes, add a hidden input with the id of the uploaded file that can be removed when the delete button is clicked.

I'm trying to remove this `uploadBtn` and use default upload file input — kez, Feb 07 '17 at 16:40
in your example once I remove files , its not changing the how many files currently remaining — kez, Feb 07 '17 at 17:34
Right - like I mentioned in the last paragraphs (under **Edit**), the filelist is read-only, so if you want to remove all files, then you can set the value to a blank value (e.g. blank string). — Sᴀᴍ Onᴇᴌᴀ, Feb 07 '17 at 17:56

Ganesh Radhakrishnan · Answer 3 · 2017-02-07T18:34:31.843

Please try this

<div class="row uploadwrapper">
<div class="col-md-4">
<input type="file" class="document" name="document[]" accept="image/jpeg">
</div>
<div class="col-md-4">  
<button type="button" onclick="uploadanother(this)">+ Upload another document</button>
</div>
</div>

function uploadanother(elem)
{
var document    = $(elem).parent().prev().find('input[type="file"]').val();
if(document!='')
{
var clonewrap   = $(elem).parent().parent().clone();                
clonewrap.find('button').removeAttr('onclick');
clonewrap.find('button').attr('onclick','removeupload(this)');
clonewrap.find('button').html('- Remove document');
$(elem).parent().parent().before(clonewrap);
$(elem).parent().prev().find('input[type="file"]').val('');
}
}

function removeupload(elem)
{
$(elem).parent().parent().remove();
}

multiple file upload with delete feature

3 Answers3

Edit: