How to Upload and Display Any Image in Django: JPG, PNG, GIF

In the world of web development, incorporating images is a fundamental aspect of creating visually appealing and engaging websites. Whether you’re building a photography portfolio, an e-commerce platform, or a social media site, enabling users to upload and seamlessly display images is essential. In this comprehensive guide, we’ll walk you through the process of uploading and displaying images in a Django web application, helping you enhance the visual experience for your users.

Prerequisites

Before we start, make sure you have the following prerequisites in place:

Django: Ensure you have Django installed. If not, you can install it using the following command:

   pip install Django

Basic Understanding of Django: Familiarity with creating views, templates, forms, and models in Django will be beneficial.

Note: This project can be used with any database as it is. No changes needed. You can learn how to Configure Database with our bellow blogs:

Step 1: Setting Up Your Django Project

Begin by creating a new Django project and app if you haven’t already. Open your terminal and run the following commands:

django-admin startproject myproject
cd myproject
python manage.py startapp imageoperations

Step 2: Creating Models

To handle image uploads, we’ll need a model to store image-related information. Open imageoperations/models.py and define the model:

from django.db import models

class UploadedImage(models.Model):
    image = models.ImageField(upload_to='uploads/')
    uploaded_at = models.DateTimeField(auto_now_add=True)

The UploadedImage model includes an ImageField to store the uploaded image and a timestamp to record when the image was uploaded.

Step 3: Creating Views

Create views to handle image uploads and display uploaded images. Open imageoperations/views.py and define the views:

from django.shortcuts import render
from .models import UploadedImage
from .forms import UploadImageForm

def upload_image(request):
    if request.method == 'POST':
        form = UploadImageForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
    else:
        form = UploadImageForm()
    images = UploadedImage.objects.all()
    return render(request, 'upload_image.html', {'form': form, 'images': images})

The upload_image view handles image uploads and passes uploaded images to the template.

Step 4: Creating Forms

Create a form to handle image uploads. In the imageoperations/forms.py file, define the UploadImageForm form:

from django import forms
from .models import UploadedImage

class UploadImageForm(forms.ModelForm):
    class Meta:
        model = UploadedImage
        fields = ('image',)

Step 5: Configuring URLs

Configure the URLs to correspond to the views you’ve created. Open the imageoperations/urls.py file and define the URLs:

from django.urls import path
from . import views

urlpatterns = [
    path('upload/', views.upload_image, name='upload_image'),
]

Step 6: Creating Templates

Generate HTML templates for the upload and display pages. Inside the imageoperations/templates folder, create an HTML file named upload_image.html.

<!-- imageoperations/templates/upload_image.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Upload and Display Images</title>
</head>
<body>
    <h2>Upload Images</h2>

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Upload</button>
    </form>

    <h3>Uploaded Images:</h3>
    <ul>
        {% for image in images %}
            <li><img src="{{ image.image.url }}" alt="Uploaded Image"></li>
        {% empty %}
            <li>No images uploaded yet.</li>
        {% endfor %}
    </ul>
</body>
</html>

Step 7: Configuring Media Settings

In your project’s settings (myproject/settings.py), configure the media settings to manage image uploads. Add the following lines at the end of the file:

import os
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Lastly, include the URLs of the imageoperations app in the project’s main urls.py file (myproject/urls.py):

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('imageoperations.urls')),
]

from django.conf import settings
from django.conf.urls.static import static
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Step 8: Running Migrations and Starting the Server

Run the initial migrations to create the necessary database tables:

python manage.py makemigrations
python manage.py migrate

Now, start the development server:

python manage.py runserver

Visit http://127.0.0.1:8000/upload/ in your browser to access the upload page, where you can upload images. The uploaded images will be displayed below the upload form.

Conclusion

Congratulations! You’ve sucessfully implemented the capability to upload and display images in your Django application. This guide has taken you through the process of setting up models, views, forms, templates, and URLs to enable users to upload and seamlessly display images. By following these steps, you’ve laid the foundation for building applications that involve image sharing, galleries, and visual content presentation.

Find this project on Github.

Read our Blog on How to Crop Image Before Upload in Django Website