AWS NodeJS App 05 – Upload de imagens para S3

Nesta nova etapa vamos modificar nosso projeto para permitir que uma imagem seja cadastrada juntamente com o formulário do produto. Para isso vamos ter que modificar nosso projeto para suportar o upload de arquivos, modificar o controller para receber esses arquivos e através do SDK da AWS enviar a imagem para um bucket dentro do serviço S3 que iremos criar. O primeiro passo é instalar duas novas bibliotecas em nosso projeto o body-parse e o express-fileupload. Elas permitem receber requisições com arquivos binários no formulário e tratar essas informações.

npm install -s body-parser express-fileupload

O próximo passo é modificar o programa app.js para importar as duas novas bibliotecas e inseri-las no pipeline do express. Observe que ao incluir o fileUpload definimos o tamanho máximo do arquivo aceito pelo servidor.

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
const fileUpload = require('express-fileupload');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var productRouter = require('./routes/product');

var app = express();

app.use(fileUpload({
  limits: { fileSize: 50 * 1024 * 1024 },
}));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/product', productRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Agora vamos preparar nosso bucket no S3 para receber os arquivos acesse a ferramenta através do console da AWS, e clique na opção create bucket.

No wizard de criação do bucket exitem diversos parâmetros, vamos nos ater aos mais importantes, informe o nome do bucket como imageawsfaeg<seunome> isso é necessário pois o nome do bucket precisa ser único em toda AWS. Escolha a região e clique em next.

No segundo passo configure options, mantenha todos os parâmetros iguais e selecione next. No terceiro passo onde são definidas as regras de segurança, vamos inicialmente desabilitar a opção Block all public access. Assim vamos ter um bucket com dados públicos para acesso. Conclua o processo até o fim. E o seu bucket será apresentado na tela do S3.

O próximo passo é alterar nosso arquivo views/product/form.hbs para incluir um novo parâmetro na tag FORM para permitir o envio de formulários compostos por diversos tipos de dados, e incluir um novo campo no formulário para permitir ao usuário selecionar o arquivo que será enviado.

<form action = "/product/save" method="POST" enctype="multipart/form-data">
		  <div class="form-group">
		    <label for="inputName">Nome</label>
		    <input type="text" class="form-control" id="inputName" name="name" 
		    	placeholder="Nome do produto">
		  </div>
		  <div class="form-group">
		    <label for="inputDesc">Descrição</label>
		    <textarea rows="5" cols="33" class="form-control" id="inputDesc" 
		    	name="description" placeholder="Descrição do produto"></textarea>
		  </div>
		  <div class="form-group">
		    <label for="inputPrice">Preço</label>
		    <input type="number" min="0" max="1000" step="0.25" class="form-control" 
		    	id="inputPrice"  name="price" placeholder="Preço do produto">
		  </div>
		  <div class="form-group">
		    <label for="imageUpload">Imagem</label>
		    <input id="imageUpload" class="file-add" 
		    	type="file" accept="image/*" name="imageUpload" required/>
		  </div>
		  
		  
		  <button type="submit" class="btn btn-primary">Salvar</button>
		</form>

Agora vamos modificar nossa classe ProductService para criar um novo método que será responsável por fazer o upload da imagem para o bucket S3. Primeiro vamos importar a biblioteca do SDK da AWS, definir duas variáveis com o nome do bucket e a região, e em seguida instanciar o objeto S3 para ter acesso a ele. IMPORTANTE: não inserimos nenhum tipo de chave de acesso pois estamos utilizando politicias e regras do IAM para permitir os acessos da aplicação aos recursos da AWS.

var AWS = require('aws-sdk');
var bucketName = "imageawsfaegwalter";
var bucketRegion = "us-east-2";

AWS.config.update({
  region: bucketRegion
});

var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: bucketName }
});

Agora dentro da classe de serviço vamos incluir um novo método chamado uploadImageS3, este método recebe um objeto contendo os dados da imagem a ser carregada, cria um objeto que define as propriedades de como o objeto será carregado para o S3, e em seguida chama o método putObject para inserir o arquivo. Importante destacar que para que não haja duplicação do nome do arquivo, utilizamos a biblioteca uuidv4() para gerar um valor randômico que é concatenado com o nome original do arquivo.

async uploadImageS3(image){
        var filename = (uuidv4() + image.name);
        const params = {
          Bucket: bucketName,
          Key: filename,
          ACL: 'public-read',
          Body: image.data
        };

        await s3.putObject(params, function (err, data) {
          if (err) {
            console.log("Error: ", err);
          } else {
            console.log("Sucesso: " + filename);
          }
        });
        return filename;
    }

Com este código estamos prontos para inserir o arquivo no S3, porém precisamos armazenar dentro da nossa tabela produto no DynamoDB alguma relação do registro do produto com sua imagem. Para isso vamos modificar o objeto Produto.js para incluir dois novos atributos o filename e o urls3.

var {
  DataMapper, DynamoDbSchema, DynamoDbTable
} = require('@aws/dynamodb-data-mapper');
class Product{
    
}
Object.defineProperties(Product.prototype, {
    [DynamoDbTable]: {
        value: 'product'
    },
    [DynamoDbSchema]: {
        value: {
            id: {
                type: 'String',
                keyType: 'HASH'
            },
            description: {type: 'String'},
            name: {type: 'String'},
            price: {type: 'Number'},
            filename: {type: 'String'},
            urls3: {type: 'String'}
        },
    },
});
module.exports = Product;

Então vamos modificar o código do método save do controlador ProductController. Esse método agora recupera o objeto que representa os dados e conteúdo do arquivo enviado, então chamada a função da classe de serviço uploadImageS3() passando o objeto que presenta o arquivo. Como a função uploadImageS3() é possui o modificador async, seu retorno é uma promisse, utilizamos o método then para aguardar a finalização do processo de upload da imagem e ai chamamos o método do serviço para incluir o registro no DynamoDB e atualizar a nova propriedade filename.

Salve os arquivos alterados no projeto, e execute o nodemon para testar a aplicação.

Ao acessar o DynamoDB, voce vai observar que o novo documento foi inserido contendo o nome do arquivo.

E ao acessar o bucket no s3, observe que o arquivo foi inserido com sucesso.

Agora devemos modificar nossa aplicação para que na tela principal que lista os produtos, a imagem do produto seja carregada. Vamos alterar o código do método getAll() do productservice.js para que ao recuperar os objetos do DynamoDB, faça uma nova consulta ao S3 para recuperar a URL de acesso a imagem. Caso não encontre o objeto ele substitui por uma imagem fixa.

async getAll(){
        var list = [];

        var result = await mapper.scan(Product,{limit:5});
        for await (const item of result) {
            var params = {Bucket: bucketName, Key: item.filename};
            s3.getSignedUrl('getObject', params, function (err, url) {
              if(err){
                  item.urls3 = "images/items/2.jpg"; 
              }else{
                  item.urls3 = url;
              }
              list.push(item);
            });
        }
        return list;

   }

O mesmo código precisa ser colocado no método de busca getAllBySearch() para também buscar a URL das imagens.

async getAllBySearch(search){
        var list = [];
        var result = await mapper.scan(Product,{limit:5, filter: {
                                                ...contains(search),
                                                subject: 'name'
                                            }});
        for await (const item of result) {
            var params = {Bucket: bucketName, Key: item.filename};
            s3.getSignedUrl('getObject', params, function (err, url) {
              if(err){
                  item.urls3 = "images/items/2.jpg"; 
              }else{
                  item.urls3 = url;
              }
              list.push(item);
            });
        }
        return list;
   }

Por fim basta alterar o arquivo index2.hbs para que o endereço da imagem use o valor do atributo urls3 da lista de produtos.