Tableless

Busca Menu

Upload de imagens desmistificado com simpleGallery.js

Seja o primeiro a comentar por

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:

npm init /my-upload-app
cd my-upload-app
mkdir public

Após todos os dados inseridos, partiremos para a inclusão dos packages que utilizaremos.

npm install --save-dev express multer

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.

const express = require('express')
const app = express()

app.get('/', (req, res) => {
 res.sendFile('public/index.html')
})

app.listen(3000, () => console.log('Lstening on port 3000!'))

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.

const express = require('express')
const app = express()
const multer = require('multer')

const upload = multer({ dest: 'public/uploads/' }) // Configuramos o destino dos arquivos.

app.get('/', (req, res) => {
 res.sendFile('public/index.html')
})

app.post('/upload', upload.array('gallery[]'), (req, res) => {
 let gallery = []
 req.files.map((image) => gallery.push({'url': `http://localhost:3000/uploads/${image.filename}`}))
 res.status(200).json(gallery)
})

app.listen(3000, () => console.log('Listening on port 3000!'))

 

Agora nossa API já está 100% funcional. Para testar, submeta um POST com as imagens para a url http://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:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Upload App</title>
 </head>
 <body>
 <form class="form-upload" action="/" method="POST" enctype="multipart/form-data">
 <input type="hidden" name="gallery">
 <label for="">Image Gallery</label>
 <div class="input-upload btn">
 Upload
 <input class="upload" type="file" multiple="multiple" accept="image/*">
 </div>
 <div class="gallery-container"></div>
 </form>
 </body>
</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á:

<input type="hidden" name="gallery">

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.

Sortable, uma lib JS vanilla, será responsável por permitir a reordenação de nossa galeria.

O código final fica assim:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Upload App</title>
 <link rel="stylesheet" href="https://raw.githubusercontent.com/fccoelho7/simpleGallery.js/master/dist/simple-gallery.min.css" media="screen" charset="utf-8">
 </head>
 <body>
 <form class="form-upload" action="/" method="POST" enctype="multipart/form-data">
 <input type="hidden" name="gallery">
 <label for="">Image Gallery</label>
 <div class="input-upload btn">
Upload
 <input class="upload" type="file" multiple="multiple" accept="image/*">
 </div>
 <div class="gallery-container"></div>
 </form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2/Sortable.min.js"></script>
 <script src="https://raw.githubusercontent.com/fccoelho7/simpleGallery.js/master/dist/simple-gallery.min.js"></script>
 <script type="text/javascript">
 new SimpleGallery('.form-upload');
 </script>
 </body>
</html>


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:

<form class="form-upload" action="/" data-action-gallery="/uploads" method="POST" enctype="multipart/form-data">

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”.

Publicado no dia