Remover arquivo do input file

[luiz monteiro 0]

Boa noite!

Estou desenvolvendo um sistema de cadastro de produtos, no qual é anexado várias imagens, porem as vezes o cliente seleciona uma ou mais imagens "erradas".

Preciso entender como remover do input file a imagem quando é clicado no ícone de lixeira correspondente a imagem em javascript puro, sem framesworks, etc.

 

Agradeço desde já!

[Omar~ 87]

Para fazer isso você vai ter que redefinir todos os arquivos que estejam no input.

O segredo é obter o nome ou qualquer informação da imagem que possa ser comparado com o objeto FileList do input.files.

Então você compara se essa informação não condiz com as demais, adicionando o atual aquivo "que não seja o que vai ser removido" e o adiciona a um objeto que seja capaz de interpretara-lo.

Para esse afim você pode está usando a API nativa DataTransfer.

Por fim você redefine o [input].files com todos arquivos.

Exemplo:

<input type="file" multiple="" />

<button onclick="exemplo()">Remover</button>
<button onclick="ver()">Ver Arquivos</button>

<script>
    var input = document.querySelector('input');

    function exemplo() {
        var dataT = new DataTransfer();

        for (var i = 0; i < input.files.length; i++) {
            // No caso se o nome do arquivo que está não input for imagem.jpg
            if (input.files[i].name !== 'imagem.jpg') {
                dataT.items.add(input.files[i]);
            }
        }
        input.files = dataT.files;
    }

    function ver() {
        console.log(input.files);
    }
</script>

 

[luiz monteiro 0]

Boa noite.

Legal.

Obrigado.

 

Eu preciso de algumas coisas especificas sobre esse assunto. Fiquei algum tempo parado cuidando da minha falecida mãe....

Você tem whatsapp para passar para que possamos combinar uma aula ou mais dentro da minha necessidade?

[Omar~ 87]

Marcar uma aula ou indicar outra não sou capaz... Uma vez que "todas aulas/cursos que fiz" nenhum era melhor que eu que aprendi na "raça".

Mas sempre quando tenho alguma dúvida consulto aqui: https://developer.mozilla.org/

 

Obs.: Sou um dos colaboradores

 

[luiz monteiro 0]

Bom dia.

Mesmo assim muito obrigado.

Eu li bastante no https://developer.mozilla.org/ mas mesmo assim não consegui resolver outros problemas semelhantes ao que você passou a solução.

Vou abrir outros posts para aperfeiçoar minhas necessidades com javascript.

 

Obrigado.