How to Add Images In Django

One of the most common requirement in any modern web application is the ability to take images or pictures from the users as input and save them on the server however Letting users upload files can have big security implications.

In this article, we will learn how to upload images in a Django application.

Uploading Images in Django

Django has two model fields that allow user uploads FileField and ImageField basically ImageField is a specialized version of  FileField that uses Pillow to confirm that a file is an image.

Let’s, start by creating models.

models.py

from django.db import modelsclass Image(models.Model):    title = models.CharField(max_length=200)    image = models.ImageField(upload_to='images')    def __str__(self):        return self.title

The image column is an ImageField field that works with the Django’s file storage API, which provides a way to store and retrieve files, as well as read and write them.

The upload_to parameters specify the location where images will be stored which for this model is MEDIA_ROOT/images/

Setting dynamic paths for the pictures is also possible.

image = models.ImageField(upload_to='users/%Y/%m/%d/', blank=True)

This will store the images in date archives like MEDIA_ROOT/users/2020/04/12

Now, Install Pillow by running the following command in your shell.

pip install Pillow

For Django to serve media files uploaded by users with the development server, add the following settings to the settings.py file of your project.

settings.py

# Base url to serve media filesMEDIA_URL = '/media/'# Path where media is storedMEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

MEDIA_URL is the URL that will serve the media files and MEDIA_ROOT is the path to the root directory where the files are getting stored.

Now add the following configuration in the project’s urls.py file.

urls.py

from django.conf import settingsfrom django.conf.urls.static import staticurlpatterns = [    path('admin/', admin.site.urls),    ...]if settings.DEBUG:    urlpatterns += static(settings.MEDIA_URL,                          document_root=settings.MEDIA_ROOT)

With that Django’s development server is capable of serving media files. Next, we need to create a model form for the Image model.

forms.py

from django import formsfrom .models import Imageclass ImageForm(forms.ModelForm):    """Form for the image model"""    class Meta:        model = Image        fields = ('title', 'image')

This will generate a form with fields title and image, which will be rendered in the templates. So let’s create a barebone template for file uploading.

index.html

<form method="post" enctype="multipart/form-data">  {% csrf_token %}   {{ form.as_p }}  <button type="submit">Upload</button></form>{% if img_obj %}  <h3>Succesfully uploaded : {{img_obj.title}}</h3>  <img src="{{ img_obj.image.url}}" alt="connect" style="max-height:300px">{% endif %}

You must remember to include the enctype property in the form tag for the uploaded file to be attached to the request properly.

With that let’s write views for handling the form.

views.py

from django.shortcuts import renderfrom .forms import ImageFormdef image_upload_view(request):    """Process images uploaded by users"""    if request.method == 'POST':        form = ImageForm(request.POST, request.FILES)        if form.is_valid():            form.save()            # Get the current instance object to display in the template            img_obj = form.instance            return render(request, 'index.html', {'form': form, 'img_obj': img_obj})    else:        form = ImageForm()    return render(request, 'index.html', {'form': form})

This is a very simple view since Django is doing all the work under the hood we are just validating the form and saving it on successful file upload. Now that we are done with the view let’s map it to a URL.

urls.py

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

Save all the files and run the server and navigate to the URL you should see the form in action.