🚀 How to Create an Image Model in Django (with Settings)
Django allows you to store and manage images using ImageField. To use this feature, you need to install Pillow, configure Django settings, and set up the database.
1️⃣ Install Pillow (Required for Image Handling)
Since Django does not include image processing by default, install Pillow:
pip install pillow
2️⃣ Define the Image Model in models.py
Open your models.py inside your Django app and define an image model using ImageField:
from django.db import models
from django.utils import timezone
class ImageModel(models.Model):
title = models.CharField(max_length=255) # Title of the image
image = models.ImageField(upload_to='images/') # Image will be uploaded to 'media/images/'
uploaded_at = models.DateTimeField(default=timezone.now) # Timestamp of the upload
def __str__(self):
return self.title # String representation
3️⃣ Configure settings.py for Media Files
Django does not serve media files by default, so you need to configure settings.py:
import os
from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent
# Media settings for image uploads
MEDIA_URL = '/media/' # URL to access media files
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # Location to store uploaded files
4️⃣ Configure urls.py to Serve Media Files
Django needs to be told how to handle media files during development.
Open urls.py and add:
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path
from .views import image_upload
urlpatterns = [
path('upload/', image_upload, name='image-upload'), # Image upload view
]
# Serve media files during development
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
5️⃣ Apply Migrations
Run these commands to create the necessary database tables:
python manage.py makemigrations
python manage.py migrate
6️⃣ Create a Simple Image Upload View (views.py)
In your views.py, define a simple view to handle image uploads:
from django.shortcuts import render
from .models import ImageModel
from .forms import ImageUploadForm
def image_upload(request):
if request.method == "POST":
form = ImageUploadForm(request.POST, request.FILES)
if form.is_valid():
form.save()
else:
form = ImageUploadForm()
images = ImageModel.objects.all()
return render(request, 'upload.html', {'form': form, 'images': images})
7️⃣ Create a Form for Image Upload (forms.py)
Django provides forms to handle image uploads. Create a forms.py file inside your app:
from django import forms
from .models import ImageModel
class ImageUploadForm(forms.ModelForm):
class Meta:
model = ImageModel
fields = ['title', 'image']
8️⃣ Create an HTML Upload Template (templates/upload.html)
Inside your app’s templates/ folder, create an upload.html file:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Upload</title>
</head>
<body>
<h2>Upload an Image</h2>
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Upload</button>
</form>
<h2>Uploaded Images</h2>
{% for image in images %}
<img src="{{ image.image.url }}" alt="{{ image.title }}" width="200">
<p>{{ image.title }}</p>
{% endfor %}
</body>
</html>
9️⃣ Run the Django Server
Start the Django development server:
python manage.py runserver
Now, go to http://127.0.0.1:8000/upload/ to upload images and see them displayed.
🔹 Summary
✅ Install Pillow (pip install pillow)
✅ Define an image model (ImageField) in models.py
✅ Configure MEDIA_URL and MEDIA_ROOT in settings.py
✅ Update urls.py to serve media files
✅ Create an upload form (forms.py)
✅ Build an upload view (views.py)
✅ Design an HTML form for uploading images
