4

Tenho esse exemplo e gostaria de remover um item da minha seleção. Porém não está removendo adequadamente, tem um problema com o número do index, como poderia resolver isso?

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

1
  • Quando você usa a função splice está retornando typeError, provavelmente porque files não é um array e sim o object com prototype FileList. Commented 9/11/2015 às 22:22

1 Resposta 1

2

Apos uma longa procura descobri que o input do tipo file possui um atributo files com herança protótipo de File, seus valores são readonly, neste caso não é permitido fazer qualquer alteração.

Existe uma forma de contornar isto, criando um array e jogando os arquivos selecionados dentro dele e trabalhando com a seleção a partir do mesmo.

Basicamente você usa o input apenas para pegar os arquivos, o tratamento é todo feito através do array, tanto exclusão como envio para o servidor. Qualquer dúvida sobre o código abaixo deixe no cometário. Também tem alguns detalhes, se quiser usar desta forma terá que esconder o texto defualt do input e criar o seu próprio.

Veja funcionando aqui no jsfiddle.

Exemplo:

'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 - Remover itens após requisição.

  {...}
  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);
    };
  }
  {...}

Código da função removeAll foi retirado desta pergunta link

Referência: Raymond Camden's Blog

Referência: SOen - how to remove...

Referência: MDN - FileReader

Referência: MDN - File

Referência: MDN - FileList

11
  • Eu entendi o que você fez @devgaspa, só que eu tentei aplicar no meu exemplo e não deu muito certo... dá uma olhada lá. Obrigado. Commented 10/11/2015 às 21:22
  • Cara, eu consegui, usei seu exemplo, e adaptei, agora está funcionando: jsfiddle.net/ivanferrer/yrvyf2gn Commented 11/11/2015 às 11:26
  • @IvanFerrer Excelente noticia, vi que tinha postado que não tinha conseguido mas estava meio corrido pra tentar ver, que bom que está funcionando. Agora vamos torcer para que mudem essa especificação de não poder alterar o objeto files né? rsrs. Estou pensando também em desenvolver uma directive para AngularJs, te envio o link do github caso queira contribuir. Abraço. Commented 11/11/2015 às 11:35
  • 1
    Não está removendo os arquivos selecionados após o submit, como resolver isso? Commented 4/08/2016 às 18:05
  • @NGTHM4R3 tem que alterar o send para apos enviar, se o status do request for ok, remover os itens dai! Commented 10/08/2016 às 20:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .