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 que possamos pular 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 contem com 3 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 --saveA execução do comando a cima 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-devCriando a primeira Rota
Abra o seu arquivo index.ts e atualize ele com o código abaixo.
Passando rapidamente pelo código a cima nos 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:
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 OK, você irá receber 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:
Vamos entender o código a cima:
- 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.
Passando pelo código a cima nos temos:
- 03: Estou importando o arquivo upload.ts
- 11 a 16: Estou adicionando um middler na rota POST.
Agora para testar o upload, crie um arquivo chamando index.html e atualize ele com o código abaixo.
A cima 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. Nós iremos precisamos configurar para que toda vez que o comando npm start for executado, ele copie esse arquivo para pasta dist. Para isso, iremos precisar baixar um pacote chamado copyfile.Execute o seguinte comando no seu terminal para baixar esse pacote:
npm install copyfiles --save-devAgora utilizar ele no projeto, nos precisamos atualizar o nosso arquivo package.json com o seguinte trecho de código abaixo:
"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 nosso código desenvolvido nesse artigo, execute o comando npm start e abra o endereço http://localhost:3000 no 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.
