Uma opção é enviar a imagem para Cloudinary no lado do cliente e salve a URL retornada no MongoDB com sua própria API. Cloudinary faz mais do que hospedar suas imagens, mas também lida com manipulação e otimização de imagens e muito mais.
Basicamente o que você terá que fazer é:
- Inscreva-se em uma conta Cloudinary
- Vá para Configurações -> Carregar
- Adicione uma "predefinição de upload" com 'Modo não assinado' para ativar o upload não assinado para o Cloudinary
Então sua função de upload pode ser algo assim:
async function uploadImage(file) { // file from <input type="file">
const data = new FormData();
data.append("file", file);
data.append("upload_preset", NAME_OF_UPLOAD_PRESET);
const res = await fetch(
`https://api.cloudinary.com/v1_1/${YOUR_ID}/image/upload`,
{
method: "POST",
body: data,
}
);
const img = await res.json();
// Post `img.secure_url` to your server and save to MongoDB
}
