Codificação

Como construir um carregador de arquivos JavaScript?

Como construir um carregador de arquivos JavaScript? Quais são os recursos de um carregador de arquivos? Criando o front-end do arquivo JavaScript...

Escrito por Niel Patel · 3 min read >
Ferramentas para torná-lo um desenvolvedor de software melhor

O upload de arquivos é um recurso básico da maioria dos projetos web atuais. Por exemplo, sites modernos e aplicativos da web como Facebook, LinkedIn, Twitter, Coursera e muitos outros permitem que os usuários finais carreguem arquivos, como imagens, documentos, vídeos, etc. e os conversores de PDF para Word também permitem aos usuários fazer upload de arquivos. Às vezes, as equipes internas precisam de um recurso de upload de arquivos para enviar vídeos e imagens de produtos. Embora criar um uploader de arquivo possa ser um desafio, hoje em dia, vários ferramentas de terceiros e bibliotecas estão disponíveis que ajudam a implementar rapidamente um recurso de upload de arquivo em seu projeto. No entanto, se você deseja criar um uploader de arquivos, mais especificamente, um uploader JavaScript, do zero, este artigo é o lugar certo.

Neste artigo, mostraremos como criar um uploader de arquivo JavaScript com JavaScript vanilla ou JavaScript puro sem usar nenhuma biblioteca externa.

Quais são os recursos de um carregador de arquivos?

Quando se trata de construir um uploader de arquivos, precisamos criar um botão front-end de upload de arquivos que permitirá aos usuários fazer upload dos arquivos desejados para o site ou aplicativo da web. Também podemos permitir uploads de vários arquivos e exibir barras de progresso para uma melhor experiência do usuário. Além disso, também devemos mostrar visualizações de imagens quando um usuário carrega um arquivo de imagem. Assim que o arquivo for carregado, precisamos lê-lo, enviá-lo para o backend e armazená-lo no servidor. Às vezes, os usuários carregam arquivos grandes, resultando em uploads lentos. Por esse motivo, é melhor fazer upload de arquivos grandes para o servidor em partes para evitar erros e melhorar a velocidade. Esses pedaços de arquivos são mais gerenciáveis ​​do que um único arquivo grande.

Além disso, os desenvolvedores devem criar um uploader de arquivos eficiente que suporte uploads rápidos. Você também precisa garantir que o uploader de arquivos seja seguro para evitar que invasores cibernéticos implantem malware e vírus em seu servidor.

Como criar um uploader de arquivo JavaScript?

Etapa 1: Configurando o lado do servidor

Usaremos o pacote HTTP integrado para configurar o servidor Node.js. Começaremos criando uma nova pasta para o projeto:

serviço de upload de arquivo mkdir

A seguir, criaremos um arquivo index.js. Este será o ponto de entrada do nosso servidor.

Criando um arquivo index.js para uploader de arquivo JS

Por fim, criaremos o servidor HTTP que será executado na porta 8080

criando o servidor HTTP

Etapa 2: Criando o front-end do uploader de arquivo JavaScript

Para criar o front-end do nosso uploader de arquivo JavaScript, criaremos um arquivo HTML básico que exibirá um botão de upload de arquivo e aceitará entradas de arquivo dos usuários. Também exibiremos o status do upload do arquivo. Assim que o usuário clicar no botão, o processo de upload do arquivo será iniciado.

Enquanto criamos um botão simples de upload de arquivo, você também pode editar o texto do botão ou alterar a cor do botão para fins de design.

criando o front-end do uploader de arquivo JavaScript

A seguir, enviaremos este arquivo do backend:

Etapa 3: lendo o arquivo enviado no front end

Para ler o conteúdo do arquivo no front end, usaremos o objeto ‘FileReader’. Ele permite que aplicativos da web leiam o conteúdo do arquivo (armazenado no sistema do usuário) de forma assíncrona. O objeto 'FileReader' oferece vários métodos para ler um arquivo. Por exemplo, podemos ler o arquivo carregado como um buffer de array ou em dados binários brutos. Podemos até ler o arquivo como uma URL de dados. Aqui, usaremos o método array para ler o arquivo:

Lendo o arquivo carregado no front-end

Os arquivos selecionados podem ser acessados ​​no campo 'arquivos' para entrada:

O objeto 'FileReader' também fornece vários ouvintes de eventos, como 'onprogress' e 'onload', para rastrear a leitura do arquivo carregado no front end. Aqui, usaremos o evento 'onload':

Etapa 4: enviar o arquivo carregado para o back-end

Antes de enviarmos o arquivo carregado pelo usuário para o backend, é melhor dividi-lo em pequenos pedaços ou pedaços e enviar os pedaços do arquivo periodicamente, especialmente se o tamanho do arquivo for grande. Isso ocorre porque o upload de arquivos muito grandes pode causar problemas relacionados à latência e velocidade. Além disso, às vezes os ciberataques também carregam arquivos muito grandes, o que pode causar mau funcionamento do servidor.

Então, primeiro dividiremos o arquivo em partes e as enviaremos para o backend, uma por uma. Também precisamos garantir que enviaremos os pedaços em ordem para que o arquivo não seja corrompido. Também usaremos 'async await' para não sobrecarregar o servidor com solicitações.

dividindo o arquivo em pedaços e enviando os pedaços para o backend um por um

Etapa 5: armazenar os pedaços de arquivo no servidor

Por último, receberemos os pedaços e os armazenaremos no servidor.

Recebendo os pedaços e armazenando-os no servidor.

É isso. Agora temos um uploader de arquivo único completo para uploads de arquivos Javascript. Também podemos ativar vários uploads de arquivos usando a opção ‘múltiplo’:

Dividiremos cada arquivo em pedaços, um por um, e os enviaremos para o backend.

Conclusão

O upload de arquivos é um recurso essencial de muitos aplicativos e sites modernos. Podemos usar uma ferramenta de upload de arquivos de terceiros, como uma biblioteca JavaScript ou uma API de upload de arquivos, para implementar rapidamente o upload de um arquivo JavaScript em nossos aplicativos. No entanto, você também pode criar um uploader de arquivo do zero da maneira que desejar. Por exemplo, você pode dividir arquivos grandes em partes e enviá-los para o back-end, um por um. Neste artigo, criamos um uploader de arquivo JavaScript com Vanilla JS do zero.

O que é um uploader de arquivos?

Um carregador de arquivos permite que os usuários finais carreguem arquivos, como imagens, vídeos e documentos, para um site ou aplicativo da web. O uploader então envia o arquivo para o backend e os armazena no servidor.

Como você pode implementar rapidamente o recurso de upload de arquivos em seu aplicativo?

Se não quiser criar um uploader de arquivo do zero, você pode usar um uploader de arquivo Javascript de terceiros, como a API de upload de arquivo Filestack.Você pode encontrar todos os exemplos de codificação fornecidos no artigo Aqui.

jogo de cartas

O Unity é apenas para jogos? 

Niel Patel in Codificação
  ·   6 min read

Deixe um comentário

Translate »