Guías Técnicas

Subir Múltiples Imágenes con Django: Guía Completa

Gestionar la subida de múltiples imágenes con Django y Python es una tarea común en el desarrollo web. Aprende a configurar modelos, vistas y plantillas con soporte para archivos multimedia de forma sencilla y eficiente.

1. Crear un entorno virtual

Si no tienes instalado virtualenv, puedes instalarlo globalmente:

bash 
pip install virtualenv # Instalar paquete virtualenv
virtualenv --version  # Verificar versión
virtualenv env         # Crear entorno virtual

Otras opciones:

Usar el paquete que ya viene por defecto en las últimas versiones de Python:

bash 
python -m venv env

Activar el entorno virtual

Dependiendo del sistema operativo:

  • Windows:

    bash 
    . envScriptsactivate

  • Mac/Linux:

    bash 
    . env/bin/activate

Para desactivar el entorno virtual:

bash 
deactivate

2. Instalar Django

bash 
pip install Django

Si necesitas una versión específica:

bash 
pip install Django==4.2.4

Verifica la versión instalada:

bash 
python -m django --version

3. Instalar Pillow

Pillow es la librería necesaria para procesar la subida de imágenes en el servidor:

bash 
pip install Pillow

4. Crear el proyecto con Django

bash 
django-admin startproject project_core .

El punto (.) al final indica que Django se instale en el directorio actual.

Ejecuta el servidor para verificar:

bash 
python manage.py runserver

5. Crear la aplicación para subir imágenes

bash 
python manage.py startapp subir_multiples_imgs

6. Crear el archivo requirements.txt

bash 
pip freeze > requirements.txt

Para instalar los paquetes en otro entorno:

bash 
pip install -r requirements.txt

7. Registrar la aplicación en settings.py

Edita el archivo settings.py:

python 
INSTALLED_APPS = [
  ...,
  'subir_multiples_imgs',
]

Configuración para Subida de Imágenes

1Configurar settings.py

Agrega las siguientes configuraciones:

python 
import os

MEDIA_URL = '/media/'  # URL para acceder a las imágenes
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # Directorio donde se guardan las imágenes

Crea una carpeta llamada media al mismo nivel que tu proyecto project_core.

2.Configurar urls.py

Edita el archivo urls.py del proyecto:

python 
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
  # tus urls
]

if settings.DEBUG:
  urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
3Definir el modelo en models.py

Crea el modelo para almacenar imágenes:

python 
from django.db import models

class Galeria(models.Model):
  images = models.ImageField(upload_to='images/')
  created_at = models.DateTimeField(auto_now_add=True, null=True, blank=True)
  updated = models.DateTimeField(auto_now=True)
4Aplicar las migraciones
bash 
python manage.py makemigrations
python manage.py migrate
5Crear las vistas en views.py

Define las vistas para subir y listar imágenes:

python 
from django.shortcuts import render, redirect
from .models import Galeria
import uuid


def inicio(request):
  context = {'data': listarImagenes(request)}
  return render(request, 'index.html', context)


def guardarMultiplesImgs(request):
  if request.method == "POST":
      images = request.FILES.getlist('images')
      for image in images:
          # Generar un nombre único para el archivo
          unique_filename = str(uuid.uuid4()) + "_" + image.name
          image.name = unique_filename
          Galeria.objects.create(images=image)
  return redirect('inicio')


def listarImagenes(request):
  return Galeria.objects.all()
6Crear la plantilla index.html

Crea un formulario para subir múltiples imágenes:

html 
<form action="{% url 'guardarMultiplesImgs' %}" method="POST" enctype="multipart/form-data">
  {% csrf_token %}
  <input type="file" name="images" accept="image/*" multiple />
  <button type="submit" class="btn btn-primary">Subir Imágenes</button>
</form>

<div>
  {% for item in data %}
      <img src="{{ item.images.url }}" alt="Imagen" style="width: 200px; margin: 10px;" />
  {% endfor %}
</div>
5Ejecutar el servidor

Inicia el proyecto:

bash 
python manage.py runserver

Resultado Final

  Conclusión

Subir múltiples imágenes en Django es un proceso práctico y eficiente que amplía las posibilidades de tus aplicaciones web. Si buscas más ejemplos o inspiración, puedes explorar este repositorio:
Subir múltiples imágenes con Django