JQuery remove selected file from list

Question

I have multiple file input and I am returning names of selected items, I want to add remove option to my list so for instance when user selects 2 files then can remove any of them before uploading files.

Code

<!-- HTML -->
<input type="file" name="file" placeholder="Choose File" id="file" multiple>

<!-- showing selected files names -->
<div class="row">
    <div class="col-md-12 filenames"></div>
</div>

<!-- SCRIPT -->
$(document).ready(function (e) {
    document.getElementById('file').onchange = function () {
        var row = 0;
        if (this.files.length > 0) {
            // THE TOTAL FILE COUNT.
            $('.filenames').append('Total Selected Files: <b>' + this.files.length + '</b></br >');

            // RUN A LOOP TO CHECK EACH SELECTED FILE.
            for (var i = 0; i <= this.files.length - 1; i++) {
                var fname = this.files.item(i).name;      // THE NAME OF THE FILE.
                var fsize = this.files.item(i).size;      // THE SIZE OF THE FILE.
                // SHOW THE EXTRACTED DETAILS OF THE FILE.
                $('.filenames').append(++row + "- " + fname + ' (<b>' + fsize + '</b> bytes) <hr/>');
            }
        }
    };
});

Current result

Any suggestions?

https://stackoverflow.com/questions/46333743/how-to-delete-a-specific-file-from-input-type-file-multiple — Amit Kumar Singh, May 06 '21 at 10:59

Nenad Vracar · Accepted Answer · 2021-05-07T11:04:35.543

Seems like there is no method provided by the File API to remove the file from the FileList, but you could create an regular array from the FileList object and then just use the splice method and delete the file by the index.

let files = []

$("#file").on('change', function() {
  files = [...files, ...this.files]
  renderFiles(files)
})

$("#submit").on('click', function() {
  console.log(files)
})

function renderFiles(files) {
  let row = 0;
  $('.filenames').html('')

  if (files.length) {
    $('.filenames').append(`Total Selected Files: <b>${files.length}</b></br >`);

    files.forEach(({ name, size }, index) => {
      const fileEl = $('<div class="file-item">')
      const text = $('<span>', {
        html: `${++row}- ${name} (<b>${size}</b> bytes)`
      })
      const btn = $('<button>', {
        text: 'X'
      })

      btn.on('click', function() {
        files.splice(index, 1)
        renderFiles(files)
      })

      fileEl.append(text)
      fileEl.append(btn)

      $('.filenames').append(fileEl);
      $('.filenames').append('<hr />')
    })
  }
}

.file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- HTML -->
<input type="file" name="file" placeholder="Choose File" id="file" multiple>

<!-- showing selected files names -->
<div class="row">
  <div class="col-md-12 filenames"></div>
</div>

<div class="row">
  <button id="submit">Submit</button>
</div>

Thank you Nenad, it works very well, however I am now facing a tiny (not sure if I should call it bug!), see now if I choose 2 files then choose another one instead of my list becomes 3 it becomes 1 (the first 2 will get replaced by new selected file) I think it supposed to update the list not to clear it? what do you think? — mafortis, May 07 '21 at 01:22
@mafortis Hi I've updated my answer to add new files on `change` instead of replacing the current ones. — Nenad Vracar, May 07 '21 at 11:05

JQuery remove selected file from list

1 Answers1