How to remove an already selected item from an upload Multiple

Question

I have this example and would like to remove an item from my selection. However it is not removing properly, has a problem with the index number, how could it solve this?

https://jsfiddle.net/ivanferrer/yrvyf2gn/

Answer 1

After a long search I discovered that the input of the kind file has an attribute files with prototype heritage of File, their values are readonly, in this case no change may be made.

There is a way around this by creating an array and playing the selected files within it and working with the selection from it.

Basically you use the input just to grab the files, the treatment is all done through the array, both deletion and sending to the server. Any questions about the code below leave in the cometarium. Also have some details, if you want to use this way you will have to hide the defualt text of input and create your own.

See working here on jsfiddle.

Example:

'use strict'

var APIFiles = {
  files: [],
  select: function(e) {
    if(this.files.length > 1) {
      for(var i = this.files.length; i > 0; i--) {
        this.files.splice(i, 1);
        document.getElementsByTagName('img')[0].remove();
      }
    }

    var tempArray = [];
    [].forEach.call(e.target.files, function(file, index) {            
      tempArray.push(file);
      var reader = new FileReader();
      reader.onload = function(e) {
        var nodeImg = document.createElement('img');
        nodeImg.setAttribute('src', e.target.result);
        nodeImg.setAttribute('id', index);
        nodeImg.setAttribute('data', 'img');
        document.getElementById('listFiles').appendChild(nodeImg);
      }; 
      reader.readAsDataURL(file);
    });
    this.files = tempArray;
  },
  send: function(e) {
    e.preventDefault();
    var data = new FormData();
    this.files.forEach(function(file) {
      data.append('files', file);
    });
    // Send FormData with XMLHttpRequest
  },
  remove: function(e) {
    this.files.splice(e.target.id,1);
    document.getElementById('listFiles').removeChild(e.target);
  }
};

document.getElementById('files').addEventListener('change', function(e) {
  APIFiles.select(e);
});

window.addEventListener('click', function(e) {
  if(e.target.id === 'send')
    APIFiles.send(e)
  else if(e.target.getAttribute('data') === 'img')
    APIFiles.remove(e);
});

img {
  display: block;
  margin-top: 5px;
  width: 100px;
}

button {
  margin-top: 5px;
}

<input type="file" id="files" multiple>
<p id="lenFiles"><p>
<div id="listFiles"></div>
<button id="send">Enviar</button>

Edit: 22/08 - Remove items after request.

  {...}
  send: function(e) {
    e.preventDefault();
    var data = new FormData();
    this.files.forEach(function(file) {
      data.append('files', file);
    });
    // Send FormData with XMLHttpRequest
    // Após fazer a requisição, se for bem sucedida chamar a função que remove os itens
    APIFiles.removeAll();
  },
  removeAll: function() {
    var listChilds = document.getElementById("listFiles");
    while (listChilds.firstChild) {
      listChilds.removeChild(listChilds.firstChild);
    };
  }
  {...}

Code of removeAll function removed from this question link

Reference: Raymond Camden’s Blog

Reference: Soen - how to remove...

Reference: MDN - Filereader

Reference: MDN - File

Reference: MDN - Filelist