TypeScript: Upload de imagens com Node.js

Veja nesse artigo como criar um upload de imagem em um projeto configurado com TypeScript e Node.js. Para pularmos a etapa de configuração de um novo projeto TypeScript, eu subi no meu GitHub um com uma configuração básica no seguinte link: TypeScript-Standard.

Esse projeto contém três arquivos: index.ts com um console.log(), package.json: com a configuração inicial de um projeto e o tsconfig.json, arquivo de configuração do TypeScript.

Baixando os pacotes

Com o projeto clonado no seu computador, execute o seguinte comando para baixar os pacotes necessários para esse artigo:

npm install express multer --save

A execução do comando acima irá baixar o express para gerenciar as rotas e o multer para auxiliar no upload dos nossos arquivos.

Agora você precisa configurar o TypeScript. Para isso, execute o seguinte comando para baixar os seus @types:

npm install typescript @types/express @types/multer --save-dev

Criando a primeira Rota

Abra o seu arquivo index.ts e atualize ele com o código abaixo.

import * as express from 'express'
import * as multer from 'multer'

const app = express();


app.get('/', (req, res) => {
    res.send('Hello World!');
})

app.listen(3000, function () {
    console.log('listening on port 3000!');
});

Passando rapidamente pelo código acima, nós temos:

Importação dos nossos modules multer e express.
Criação de uma rota.
Configuração da porta que o projeto irá escutar.
Testando a Rota

Para testar a rota, atualize o seu arquivo package.json com o código abaixo:

"name": "tsnode-standard",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "prestart": "tsc",
    "start": "node dist/index.js"
  },

Agora execute npm start para criar o diretório dist, assim que ele for criado irá executar o comando node dist/index.js e rodar o projeto na porta 3000. Abra o endereço http://localhost:3000, caso tudo esteja OK, você verá a mensagem Hello World. Podemos ver esse retorno na imagem abaixo.

Criando rota de Upload

O seu próximo passo será configurar o multer. Para isso, crie um novo arquivo na raiz do seu projeto chamado upload.ts na raiz do seu projeto e atualize ele com o código abaixo:

import * as multer from "multer";

const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, "uploads/");
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname);
  }
});

const uploads = multer({ storage: storage });

export default uploads ;

Vamos entender o código acima:

01: Estamos importando o multer, ele é uma biblioteca que nos permite trabalhar com multipart/form-data.
03 a 10: Estamos passando qual será o nosso filename e o diretório que iremos enviar os nossos arquivos.

Agora você precisa criar uma rota para o upload. Para isso, atualize o seu arquivo index.ts com o código abaixo.

import  * as express from 'express'

import uploads from './upload'

const app = express();

app.get('/',(req,res) => {
    res.send('Hello World');
})

app.post('/', uploads.single('avatar'),  (req, res)  => {
    try {
        res.send('Arquivo enviado com sucesso: ' + req.file.filename);
    } catch (error) {
        console.log(error);
    }
   
})


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

Passando pelo código acima, nós temos:

03: Importação do arquivo upload.ts
11 a 16: Adição de um middler na rota POST.

Agora, para testar o upload, crie um arquivo chamando index.html e atualize ele com o código abaixo:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<form class="uploadForm" action="http://localhost:3000/" method="post" enctype="multipart/form-data">
    <label class="control-label">Select File</label>
    <input name="avatar" id="input-1" type="file" class="file">
    <input type="submit" value="submit" />
</form>

</body>
</html>

Acima foi criada uma estrutura html com um formulário e um campo file para o upload. Geralmente eu utilizo o postman para esses testes HTTP nos meus artigos, mas nesse eu irei mostrar como retornar ele na rota Get.

Como iremos adicionar o arquivo .html no retorno da nossa rota Get, e lembrando que o nosso arquivo é transpilado para pasta dist. Precisaremos configurar para que toda vez que o comando npm start for executado, ele copie esse arquivo para pasta dist. Para isso, vamos precisar baixar um pacote chamado copyfile.

Execute o seguinte comando no seu terminal para baixar esse pacote:

npm install copyfiles --save-dev

Agora, para utilizar ele no projeto, precisaremos atualizar o nosso arquivo package.json com o seguinte trecho de código:

"scripts": {
"prestart": "tsc && copyfiles *.html dist/",
"start": "node dist/index.js"
}

Note que o prestart está concatenando o tsc com um novo comando para executar o pacote copyfiles.

Agora atualize novamente a sua rota GET com o código abaixo:

app.get('/',(req,res) => {
res.sendFile('index.html', { root: __dirname });
})

Em seguida, crie um novo diretório chamado uploads na raiz do seu projeto.

Testando o código

Para testar o código desenvolvido nesse artigo, execute o comando npm start e abra o endereço http://localhost:3000 em seu navegador. Podemos ver o resultado dessa implementação na imagem abaixo:

Com isso finalizamos o nosso passo a passo para o upload, espero que tenham gostado e até um próximo artigo!

De 0 a 10, o quanto você recomendaria este artigo para um amigo?

Powered by: