Em muitos aplicativos web, é comum permitir que os usuários carreguem fotos de perfil. No entanto, armazenar essas fotos em um servidor pode consumir muito espaço de armazenamento e pode ser lento para os usuários carregarem. É por isso que muitos desenvolvedores optam por fazer o upload dessas fotos diretamente para a nuvem.

Neste post, vou explicar como você pode usar o Cloudinary para fazer o upload de fotos de perfil do usuário do Flask diretamente para a nuvem. Você também aprenderá como salvar a URL da imagem do Cloudinary em uma coluna chamada "foto de perfil" na tabela do usuário.

Passo 1: Configurar o Cloudinary

A primeira coisa que você precisa fazer é se inscrever no Cloudinary e configurá-lo para o seu aplicativo. Depois de se inscrever, você receberá um nome de usuário, uma chave de API e uma chave secreta que você usará para autenticar suas solicitações de upload.

Mas calma, faremos isso passo a passo para que você entenda!

Primeiro, como supracitado criaremos a nossa conta no site da Cloudinary clicando aqui

Agora é com você! Crie sua conta conforme a sua necessidade. Eu, pelo menos, usei o meu GitHub para tal e achei que foi uma decisão sábia, uma vez que economizei tempo! E tempo é dinheiro emmm

Feita a sua conta, deixe a primeira tela lá! Ela é importante, mas nós faremos outro processo aqui: a instalação do Cloudinary no seu aplicativo Python!

Para instalar a biblioteca Python do Cloudinary, você pode usar o seguinte comando no terminal do seu aplciativo (Lembre-se de estar no mesmo venv do seu aplicativo!):

pip install cloudinary

Agora que você realizou os processos acima, criaremos um arquivo na raiz do seu projeto Flask chamado config.py. Nele, colocaremos exatamente isso:

import cloudinary
import cloudinary.uploader
import cloudinary.api

cloudinary.config(
  cloud_name = "you_cloud_name",
  api_key = "you_api_key",
  api_secret = "you_api_secret"
)

Onde estiver you_*, você substituirá pelos dados que obteve na criação da sua conta no Cloudinary. Esses dados estão exatamente como no print abaixo. E é claro que os meus você não irá ver haha!

Agora falta bem pouquinho para você integrar de vez a sua nuvem do Cloudinary ao seu aplicativo Flask! No arquivo onde estão suas rotas, você fará as seguintes importações:

import cloudinary
import config

Pronto, o seu aplicativo está totalmente integrado! Agora é só você fazer o upload das fotos dos seus usuários para a nuvem! E fazer isso é extremamente simples! Supondo que você já tenha uma coluna no seu banco de dados assim:

foto_perfil = database.Column(database.String(50), nullable=False)

Na sua rota em que o usuário modifica a foto dele, você deve fazer algo parecido com:

# upa a foto para o cloudinary
response = cloudinary.uploader.upload(form.foto_perfil.data)

# muda a coluna foto_perfil do usuario
usuario.foto_perfil = response['public_id']

Sim, isso mesmo! Dessa forma, o Cloudinary irá definir um nome para a imagem (sem repetir algum já existente) e você irá integrar esse nome na coluna foto_perfil do usuário.

E para chamar essa imagem é algo extremamente simples. No HTML, basta você fazer algo como:

<img src="{{ 'https://res.cloudinary.com/dsfomdqni/image/upload/' ~ usuario.foto_perfil }}">

OBSERVAÇÃO

Lembrando que usei algumas variáveis aqui que podem estar diferentes para o seu projeto. usuario e foto_perfil podem estar diferente para você! Cabe a você a transformação dessas variáveis de acordo com o seu projeto! Eu estou aqui para ajudar e contribuir, caso você ainda tenha dificuldades para essa integração, basta comentar abaixo que eu irei te ajudar

Bônus

• Eu suponho que você queira ter uma foto como default no seu sistema! Para aqueles usuarios chatos que não trocam a foto de perfil Para usuários que não usam foto de perfil! Faça upload de uma foto padrão para o Cloudinary e a nomeie como default. E deixe para que toda vez que um usuário for criado seja dado um valor a coluna foto_perfil chamado default. A foto que você pode usar como default pode ser essa abaixo!

Se você usa o FlaskSQL Alchemy basta ter no seu arquivo de models algo como:

foto_perfil = database.Column(database.String(50), nullable=False, default="default.png")