Na esfera do desenvolvimento web, existem várias maneiras de fazer upload de arquivos ao coletar informações do usuário. Um dos métodos é copiar e colar. Copiar e colar para entrada de arquivo é um método muito intuitivo de fazer upload de arquivos dos usuários. O método de entrada de arquivo copiar e colar alivia os usuários da necessidade de memorizar a localização do arquivo que desejam enviar. Neste artigo, discutiremos como você pode implementar a entrada de arquivo copiando e colando em seu site.

Implementaremos a entrada do arquivo copiar e colar aproveitando as interfaces ClipboadEvent e EventTarget. A interface ClipboardEvent fornece informações sobre o evento paste, e a interface EventTarget nos permite ouvir o evento paste.

Enquanto ouvimos o evento paste, anexaremos uma função manipuladora de eventos onde decidiremos o que fazer com os itens colados. No nosso caso, pegaremos o arquivo colado e o renderizaremos instantaneamente após ser completamente carregado no navegador. Começaremos com o HTML e os estilos.

O HTML e os estilos

Vamos começar criando a marcação HTML da área de colagem. O trecho de código abaixo é a marcação HTML:

    
    
    
    


    

        Paste your file here
    
    

    

O trecho de código acima renderiza um contêiner retangular dentro do qual poderemos colar arquivos. O contêiner possui um atributo chamado contenteditable definido como true. O atributo contenteditable é importante para permitir a colagem de arquivos ou quaisquer outros itens no contêiner. Se o atributo contenteditable for alterado para falso ou removido, a ação de colar não funcionará conforme o esperado. Também temos um contêiner com o id de visualização. Usaremos o contêiner de visualização para visualizar a imagem colada pelo usuário.

Vamos adicionar alguns estilos básicos à nossa marcação de style.css

*{
    font-family: Arial, Helvetica, sans-serif;
}

body{
    text-align: center;
    margin-block-start: 4rem;
}
#pasteArea {
    border: 2px dashed #ccc;
    padding: 20px;
    width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    margin: auto;
    color: rgb(5, 89, 89);
}

#preview img {
    max-width: 100%;
    margin-top: 10px;
}

A marcação e a folha de estilo acima criam um contêiner simples com bordas tracejadas e um texto de prompt simples, conforme mostrado na captura de tela abaixo:

Agora que criamos a UI, vamos adicionar algumas funcionalidades úteis com JavaScript na próxima seção.

O roteiro

Nesta seção, usaremos JavaScript para adicionar um ouvinte de evento paste à área de colagem. Antes de obtermos a área de colagem do DOM para anexar o ouvinte de evento, primeiro esperamos que o conteúdo do DOM seja carregado como no trecho de código abaixo.

document.addEventListener('DOMContentLoaded', () => {
    const pasteArea = document.querySelector('#pasteArea');

    pasteArea.addEventListener('paste', (event) => {

    });
});

No trecho de código acima, adicionamos um ouvinte para o evento DOMContentLoaded. Isso nos permite esperar que a árvore DOM seja criada antes de podermos obter os elementos DOM. Em seguida, selecionamos o contêiner da área de colagem e anexamos um ouvinte de evento de colagem a ele.

Obtendo o arquivo dos itens colados

O manipulador de eventos paste não foi implementado no trecho de código anterior. Vamos implementá-lo obtendo os dados do objeto de evento e registrando-os no console. Faremos mais com os dados posteriormente neste artigo, por enquanto, queremos apenas garantir que os arquivos sejam recebidos quando os itens forem colados na área de colagem. O trecho de código abaixo mostra a implementação mínima do manipulador de eventos paste.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()

                console.log(file)
            }
        }
    })

No trecho de código acima, obtemos itens do objeto event.clipboardData. O event.clipboardData.items é um DataTransferItemList que é um objeto semelhante a uma lista que contém o conteúdo dos itens colados. Os itens são armazenados em uma lista porque é possível ao usuário copiar e colar vários itens de uma vez.

Em seguida, iteramos sobre os itens usando o loop for ...of. No loop, verificamos se cada um dos itens é um arquivo. Se o item for king 'file', nós o obtemos como um arquivo e o imprimimos no console do navegador.

Imprimir as informações do arquivo no console não é muito útil para os usuários da sua página web. Vamos fazer algo um pouco mais interessante na próxima seção.

Visualizando o arquivo enviado

Seria difícil para um usuário saber que o upload do arquivo foi bem-sucedido depois de colar os itens na área de transferência se não o mostrarmos em lugar nenhum. É importante indicar que o arquivo foi carregado com sucesso exibindo algo que indica sucesso. Qual a melhor maneira de indicar o sucesso de um upload do que exibir o próprio arquivo enviado?

Nesta seção, estenderemos o manipulador de eventos paste para criar uma URL a partir do arquivo recebido. Usaremos o URL criado para renderizar o arquivo assim que ele for carregado no navegador. Aproveitaremos a API FileReader para criar uma URL a partir do arquivo conforme codificado no snippet abaixo.

pasteArea.addEventListener('paste', (event) => {
        const items = event.clipboardData.items
        for (const item of items) {
            if (item.kind === 'file') {
                const file = item.getAsFile()


                const reader = new FileReader();

                reader.onloadend = (e) => {
                    const url = e.target.result
                    console.log(url)

                };
                reader.readAsDataURL(file);
            }
        }
    });

No trecho de código acima, criamos uma instância do FileReader e a usamos para gerar o URL dos dados. Também anexamos um ouvinte de evento loadend ao objeto FileReader onde registramos o resultado da leitura no console. Este é o primeiro passo para visualizar o arquivo, agora podemos usar a URL para exibir o arquivo.

Assumindo que o usuário colou os arquivos de imagem, o trecho de código a seguir mostra como podemos estender o manipulador de eventos para criar uma URL e exibir o arquivo de imagem.

 reader.onloadend = (e) => {
       const url = e.target.result
       const preview = document.querySelector('#preview')
       const img = document.createElement('img');

       img.src = url;
       preview.appendChild(img);
   };

No trecho de código acima, obtemos o contêiner de visualização do DOM e criamos um elemento img para renderizar a imagem. Atribuímos o URL criado como o src da imagem e anexamos a imagem ao contêiner de visualização. Depois que a imagem for anexada ao contêiner de visualização, o usuário poderá saber que a imagem colada foi carregada com sucesso na página da web.

Sucesso! Implementamos com sucesso o upload de arquivos copiando e colando em uma página da web. Este método de upload de arquivos dá aos usuários o privilégio de fazer upload de arquivos facilmente, sem a necessidade de clicar em vários botões para selecionar o arquivo a ser carregado. A interface ClipboadEvent fornece uma maneira fácil de coletar dados de itens colados no navegador. A interface do FileReader nos permite criar um URL a partir do arquivo carregado e usá-lo para visualizar o arquivo carregado.

Sinta-se à vontade para dizer algo na seção de comentários. Saiba mais sobre as interfaces ClipBoardEvent e FileReader do MDN.