Olá pessoal, tudo bem?
Neste artigo vou procurar abordar algo comum no dia-a-dia de qualquer desenvolver, o “temido” upload de imagens. No processo utilizarei NodeJS e Express para o back-end. A grande sacada será a utilização da lib simpleGallery.js, que nos auxiliará no front-end.
Passos iniciais..
A seguir criaremos um servidor bem simples. Utilizarei o package “Multer” como middleware para as requisições de arquivo. Não vou prezar por segurança nem boas práticas, já que este artigo é apenas para encorajar aqueles que ainda possuem dificuldades.
Primeiro começaremos com a instalação do NodeJS e NPM, para mais informações:
Após NodeJS e NPM instalados, é hora de criarmos nosso package.json, que será responsável por armazenar o nome do app, versão, nossos packages etc. Abra o terminal e digite:
Após todos os dados inseridos, partiremos para a inclusão dos packages que utilizaremos.
Este comando instalará as últimas versões de cada package, permitindo a sua utilização junto ao NodeJS.
Criando o Server
Com tudo instalado, basta criar um arquivo em nosso diretório chamado de index.js. Este conterá o básico para criar nossa API e seus respectivos endpoints. Estou utilizando o Hello World do próprio Express, que está presente neste link.
Isto já é o suficiente para rodar nosso server (digite node index.js). Tudo que estiver dentro da pasta /public obviamente será considerado como público e “visível” ao browser.
Sem mais delongas, vamos partir para o endpoint que receberá os arquivos e retornará um JSON com as respectivas URL’s, ele também será responsável por armazenar nossas imagens na pasta /uploads. Neste ponto utilizo uma configuração mínima do ‘Multer’, você pode melhorar este processo limitando os arquivos por tamanho, tipo, quantidade etc. Para mais informações, clique aqui.
Agora nossa API já está 100% funcional. Para testar, submeta um POST com as imagens para a url https://localhost:3000/uploads. Você receberá uma resposta formato JSON com a URL das imagens enviadas.
Já no Front-End..
Com a nossa API criada, agora precisamos configurar o nosso front-end. Para isto, vamos iniciar criando um index.html dentro da pasta /public. Após criado, é hora de escrevermos nosso HTML:
Até agora nenhuma novidade, um formulário enctype="multipart/form-data" com os campos necessários para enviarmos as fotos para nossa API.
“Hora do show!”
Chegou a hora de implementarmos o simpleGallery.js, uma lib JS vanilla, de apenas 2kb gzipped. Esta será responsável por submeter as imagens e salvar o JSON de retorno em algum input hidden, em nosso exemplo, utilizaremos o padrão da lib que será:
Também faremos a inclusão do CSS e JS, que pode ser encontrado no próprio repositório do simpleGallery.js. Ou via NPM/Bower, basta procurar por: simple-gallery-js.
O Sortable, uma lib JS vanilla, será responsável por permitir a reordenação de nossa galeria.
O código final fica assim:
Mas pera!
“Eu tenho minha API de uploads em uma URL e meu formulário será enviado para outro endpoint, como farei isso?” Bom, caso você não deseje utilizar o mesmo endpoint para upload de imagens e requisição do formulário, o simpleGallery.js nos permite criar um segundo **action. **Basta inserir um data-action-gallery, como no exemplo abaixo:
Por fim.
Outras opções como: trocar o name do input que receberá o JSON das url’s e a classe que conterá a galeria também são possíveis, para mais informações acesse o repositório oficial do simpleGallery.js.
O conteúdo deste artigo pode ser encontrado aqui.
Bom, é isso. Espero que tenha gostado e perdido o medo quando o assunto é “upload de imagens”.
