JQuery remove selected file from list

user_8490993 0
Viewed 128

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

one

Any suggestions?

jquery javascript
1 Answers

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>

user_46207710
Related