Como fazer upload de fotos de perfil de usuários do seu app Flask para um serviço de hospedagem gratuito
Tags: cloudinary, flask, python, braziliandevs
Published: 2023-04-10 19:48:10

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](https://cloudinary.com/users/register_free)

![Criando conta no Cloudinary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9f3op8y16im44qpx4ij.png)

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!):

```python
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:

```python
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!~~

![Obtendo seus dados do Cloudinary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh42inga7x390oynbgz3.png)

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:

```python
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:

```python     
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:

```python
# 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:

```html
<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!

![Foto de Perfil Default](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmibufn3xs4luhog92lu.png)

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

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