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?
1 Resposta
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
-
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
-
1Nã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
splice
está retornandotypeError
, provavelmente porque files não é umarray
e sim oobject
comprototype
FileList.