How to remove an already selected item from a multiple upload

Question

How to remove an already selected item from a multiple upload

Navigation

#1 by (2 votes)

4

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

link

javascript jquery html5 ajax multiple

asked by anonymous 09.11.2015 / 22:21

1 answer

Redirect user to Google Maps application Post IdHTTP FIREMONKEY Delphi XE7

score 2 · Accepted Answer

After a long search I found that input of type file has a files attribute with prototype inheritance of File , its values are readonly , in this case it is not allowed to do any change.

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

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

See working here at 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);
    };
  }
  {...}

Function code removeAll has been removed from this question link

Reference: Raymond Camden's Blog

Reference: SOen-how to remove ...

Reference: MDN - FileReader

Reference: MDN-File

Reference: MDN - FileList