Loja Virtual - Ecommerce - Django - Campo para upload de imagens ou arquivos
Na aula passada construimos a parte referente aos detalhes de cada produto.
Vamos continuar na parte dos detalhes de um produto com os image field e file field.
Agora os campos para upload de imagens ou arquivos referente a cada produto.
Vou deixar meu link de referidos na digitalocean pra vocês.
Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:
Esse outro link é da one.com:
Campo para upload de imagens ou arquivos de um produto.
Em
src/products/models.py acrescente:
from django.db import models
# Create your models here.
class Product(models.Model): #product_category
title = models.CharField(max_length=120)
description = models.TextField()
price = models.DecimalField(decimal_places=2, max_digits=20, default=100.00)
image = models.FileField(upload_to = 'products/')
#python 3
def __str__(self):
return self.title
#python 2
def __unicode__(self):
return self.title
Static CDN(Content Delivery Network)
Vamos criar a pasta dentro da nossa pasta static_cdn, que tá simulando um cdn, a pasta media_root, que ainda não criamos, então crie:
django_ecommerce/media_root/ no mesmo nível da static_root.
As imagens e arquivos vão ser carregadas nessa pasta como configurado no final do
src/e_commerce/settings.py
Rode o comando:
python manage.py makemigrations
Veja a mensagem que o Django mostra:
ele reclama que você tá tentando adicionar um campo que não pode ser nulo (null) ou em branco.
Para corrigir isso acrescente ao campo image no
src/products/models.py o que tá em laranja.
from django.db import models
# Create your models here.
class Product(models.Model): #product_category
title = models.CharField(max_length=120)
description = models.TextField()
price = models.DecimalField(decimal_places=2, max_digits=20, default=100.00)
image = models.FileField(upload_to = 'products/', null = True, blank = True)
#python 3
def __str__(self):
return self.title
#python 2
def __unicode__(self):
return self.title
Campo obrigatório
O
null = True quer dizer que você pode ter esse campo em branco no banco de dados e o
blank = True quer dizer que não é um campo obrigatório no Django.
Resumindo, os dois juntos diz ao Django que esse campo não é obrigatório está preenchido.
Rode novamente o comando:
python manage.py makemigrations
python manage.py migrate
python manage.py makemigrations: Cria as migrações (gera os comandos SQL).
python manage.py migrate: executa as migrações (executa os comandos SQL).
Veja que dessa vez não houve nenhum problema, o Django não reclamou de nada.
Testando
Levante o servidor se não tiver já rodando:
python manage.py runserver
Entre na página de administrador e faça o login:
Clique em products, clique em algum produto, veja que agora tem o campo image, mas, ele tá meio cinza e não tá em negrito como os outros campos, troque o
blank = True, para
False, dê um refresh na página e veja que ele fica como os outros campos, mais preto e em negrito.
Campo não obrigatório
Como queremos que esse campo não seja obrigatório, então deixe do jeito que tava mesmo, com o
blank = True.
Faça o upload de uma imagem para esse produto e veja que ela fica na url:
127.0.0.1:8000/media/products/imagem_produto.jpg
O
/media/ vem do
MEDIA_URL = '/media/' no
src/e_commerce/settings.py e
products do
image = models.FileField(upload_to = 'products/', null = True, blank = True) no
src/products/models.py , depois é o nome do arquivo (
imagem_produto.jpg)
Esse campo é para carregar apenas imagens, mas, se você tentar carregar outro tipo de arquivo, ele vai aceitar, por isso vamos modificar a linha:
image = models.FileField(upload_to = 'products/', null = True, blank = True) em
src/products/models.py.
Pillow
Vamos trocar
models.FileField para
models.ImageField, mas veja que vai dá um erro, o Django reclama que o Pillow não está instalado, então rode o comando abaixo para instalar o Pillow:
pip install pillow
É uma biblioteca python para imagens.
Rode agora:
python manage.py makemigrations
python manage.py migrate
Levante o servidor se já não estiver no ar.
python manage.py runserver
Tente fazer o upload de algo que não seja uma imagem e veja o erro que dá:
Upload a valid image....
Faça o upload de uma imagem de tênis e insira no produto tênis (
tenis.png), para testar.
Temos agora que renderizar a imagem referente ao produto na página de template do detail.
Em
src/products/template/products/detail.html insira:
{{ object.title }} <br/>
{{ object.description }} <br/>
{{ object.image }}
Salve e veja o resultado no browser em
127.0.0.1:8000/products/2
Veja que não mostrou a imagem, apenas a url da imagem, mesmo assim, a url errada, se você copiar a url
127.0.0.1:8000/products/imagem_123454e3.png, e colar na barra de endereço do browser, a imagem não vai ser encontrada.
Por isso, vamos a mais uma alteração no template do detail, vamos inserir
url em
object.image
src/products/template/products/detail.html
{{ object.title }} <br/>
{{ object.description }} <br/>
{{ object.image.url }}
Agora sim, a url da imagem está correta:
127.0.0.1:8000/media/products/tenis_lnVQeVY.jpeg
A imagem ainda não aparece na página, só o caminho dela, então vamos modificar novamente o
src/products/template/products/detail.html
{{ object.title }} <br/>
{{ object.description }} <br/>
<img src='{{ object.image.url }}' class='img-fluid' />
Colocamos a tag HTML img e também definimos a class como img-fluid, que é uma classe do bootstrap.
Veja o resultado no browser
127.0.0.1:8000/products/2
Vou deixar meu link de referidos na digitalocean pra vocês.
Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:
Esse outro link é da one.com:
Obrigado, até a próxima e bons estudos. ;)
