Multer

expressjs/multer

Biblioteca utilizada para trabalhar com upload de imagens

Criar uma pasta /config dentro de /src e dentro vamos criar uma arquivo multer.tsx

npm install multer
npm install @types/multer -D

Improtar o multer e vamos usar o método diskStorage que recebe duas propriedades, destination (para onde vão os arquivos que foram feitos uploado pelo usuário) e a segunda é o filename que recebe 3 propriedades (reques, file, callback) que vamos utilizar para mudar o nome do arquivo deixando único

→ request → igaual o request de requisição de rotas, para podermos ter acesso às informações da requisição que está vindo do front-end, que traz o arquivo e tudo mais

→ file: são os dados do arquivo em si. Nome, tamanho, formato

→ callback: que vamos chamar quando terminarmos de processar o filename

filename que vamos utilizar para mudar o nome do arquivo que o usuário faz upload para evitar de um ou mais usuários cadastrarem um arquivo com o mesmo nome

Para deixar o arquivo com um nome único vamos utilizar a biblioteca crypto para gerarmos um hash aleatório de dados e que vamos concatenar com o nome do arquivo que o usuário fez o upload

import multer from 'multer'
import path from 'path'
import crypto from 'crypto'

export default {
    storage: multer.diskStorage({
        destination: path.resolve(__dirname, '..', '..', 'uploads'),
        filename(request, file, callback) {

        }
    }),
}

Vamos usar a função randomBrytes para gerar os caracteres aleatórios e converter para string no formato hexadecimal

import multer from 'multer'
import path from 'path'
import crypto from 'crypto'

export default {
    storage: multer.diskStorage({
        destination: path.resolve(__dirname, '..', '..', 'uploads'),
        filename(request, file, callback) {
            const hash = crypto.randomBytes(6).toString('hex')

            const fileName = `${hash}-${file.originalname}`

            callback(null, fileName)
        }
    }),
}

Juntamos o hash com o nomoe orinal do arquivo em uma variável fileName e depois passamos ela como parâmetro da callback. Aqui não colocamos err na callback porque a chance de dar erro é praticamente zero.

Multer nas rotas

Precisamos importar o multer e as configurações dele para as rotas e atribuir o multer passando como parâmetro as suas config para dentro de uma variável upload que criaremos

Essa variável vamos passas junto nas rotas que precisam de upload de imagens

Aqui usamos método single e o nome do campo - que é o nome que enviamos no cadastro do ponto qunado fazemos a requisição. Utilizamos o método single() porque é apenas uma imagem, mas para várias podemos utilizar o método .aray()