Upload Multiple Images to a Django Model without plugins

Upload Multiple Images to a Django Model without plugins

Upload Multiple Images to a Django Model without plugins

In this article, I am going to show you how to add multiple images to a Django model without any plugins. It’s better to keep the project simple and avoid any extra plugins which can cause unexpected errors during production or disable some of the functionalities. By using a small trick in Django admin you will able to upload multiple images to a particular model.

Now, I assume that you already activated your virtual environment so, let’s create a new Django project named “mysite” and a new app named “posts”.

Since we use images in our project, we have to configure settings.py in order to serve static and media files and display templates. Update the TEMPLATES configuration:

settings.py

Now, we should add static and media files configurations at the end of this file:

settings.py

Great! It’s time to add our models into models.py and there will be two models in our case. The first model is “Post” which includes three fields just to show basic information about the post on the home page.

models.py

As you see from the code snippet above we have a title, description, and image fields in the Post model. You can change FileField to ImageField it’s up to you since this tutorial covers multiple files and images, FileField is probably the right choice for now.

In Django, you can’t store multiple images in one field, so we are going to add a new model named “PostImage” to store all images and at this time we will use the ForeignKey field to create a relationship between these two models. Update your models.py by adding “PostImage” model:

models.py

Once you updated models, it’s time to migrate our models and create a new superuser in order to access Django admin.

Great! Now, the main part is starting, open your admin.py to make configurations. We will create a single Django admin from two different models. The default Django administration comes with a concept of inlines, so if you have a one-to-many relationship you can edit the parent and its children on the same page or we can say admin interface has the ability to edit models on the same page as a parent model. However, you are limited in a way that you can’t have inlines inside inlines and nested one-to-many relations, so to avoid that we are using StackedInline class to edit “PostImage” model inside “Post” model.

admin.py

Configure your admin.py as shown the above and you can go and check your admin now by clicking add new post. It should look like the image below:

Stacked Inline Django

Stacked Inline Django

As you see you can add how many images you want into a Post model and all these images will belong to a specific Post model with the help of ForeignKey.

Now,  navigate to your views.py to create views in order to render templates so we can see the created posts.  In detail_view we are filtering “PostImage” objects by post foreign key, so related images will be populated inside detail of post. Simply add the following views, it’s not complicated just basic level views to populate images and posts :

views.py

Next, open urls.py to configure URLs and also add media URL configuration to serve images:

urls.py

Finally, create a new folder named “templates” in your project, and then we will add three HTML files just to show posts and details in the browser.

base.html

We are using Bootstrap just to give a simple design to our project.

blog.html

detail.html

In detail.html I added a carousel to show related images for a specific post. You can see the indicators of the carousel (<ol>) surrounded with for loops and I used for loop counter to detect active carousel item. The same logic applied to carousel items to detect active images.

Great! Now, you can create a new post and check it on the home page. Once you click the details you will able to see related images in a carousel.

I hope it helps you to organize your multiple images and also it keeps the project simple. Maybe there are a lot of plugins on the internet that can handle multiple images but as I said before these plugins can cause errors or disable some of the functionalities of the project. Simple is more!

You can find source code in the following link:

https://github.com/raszidzie/Multiple-Images-Django-Tutorial/

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

12.06.2023

The Ultimate Guide to Pip

Developers may quickly and easily install Python packages from the Python Package Index (PyPI) and other package indexes by using Pip. Pip ...

How to implement WPF Canvas? Explain with an example

Canvas is a lightweight layout of WPF. Canvas is used for 2D graphic design elements but not for UI. You cannot use it for making text-box, checkbox, ...

Build Real-world React Native App #0: Overview & Requirement

This series for beginner to intermediate level React Native developers will guide you to build a simple app that serves post from WordPress API. It ...

5 comments

Hossein Taheri October 30, 2020 at 2:25 pm
0

Just what i needed. Thaaaaaaaaaaaaaank you sooooo much!

Robert Gore December 2, 2020 at 5:53 pm
0

It’s an amazing tutorial. I’ve got a question though. How can I handle all this within one view. So to have title and then multiple files on one view. I cannot work this out. Could you advice, please?

Avo Muumi January 4, 2021 at 12:33 am
0

Is it possible to add dropzone js to an admin page? Drag and drop multiple image upload?

Nduati Kagiri September 3, 2021 at 12:08 am
0

Hello. What code can I use in my views.py to receive multiple images from template and save each image at once?

Micheal Damilare April 29, 2023 at 12:55 pm
0

Really appreciate you on this content, just a perfect one for me. Great job!

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy