Add Images from Django Admin Site

We will walk through step by step to understand the mechanism of adding images in a Django website from the user Admin Site. We will learn this functionality in 3 steps:

1. Update settings.py file
2. Update models.py and admin.py files
3. Run migrations

Before we start working on these 3 steps, we first have to install Pillow, which is a Python Imaging Library. It adds image processing functionalities to the interpreter.

Create virtual environment with command

• virtualenv venv (venv is the name of virtual environment)

Activate virtual environment with command

• source venv/bin/activate

Install Django with command

• pip install django

Install Pillow library with command

• pip install pillow

Create project with command

• django-admin startproject myproject (myproject is the name of the project we just created)

The command cd myproject takes us inside the myproject folder

Create an app with command

• python manage.py start-app myapp (myapp is the name of the app we just created)

Run server with command python manage.py runserver. This command runs the local host at port 8000

http://127.0.0.1:8000/

Break the server with control+c and run migrations with the command. Migration command(s) creates tables in the default django database dbsqlite3.

• python manage.py migrate

After creating table in the database, we can now create a superuser, which is the site administrator

• python manage.py createsuperuser

After providing username and password, superuser is created.

Now, we can start working on our three steps;

In this step we update settings.py file in our inner project folder:

In the INSTALLED_APPS section, register the app ‘myapp‘. It should look like this:

Django considers images as media files, we need to add media_url and media_root in settings.py file as shown below:

Django will create a ‘media’ folder to hold a subfolder. We name the subfolder with ‘upload_to’ attribute in models.py file inside our app.

Inside our app ‘myapp’, we open models.py file and create a model. A model is a table in the database.

Here is the example of model:

Import models from django database

Create a model class with model name ‘Picture’, which inherits models.Model

Define fields of the model with appropriate field names (see django documentation). Fields are the columns in the database.

In our picture field, we put models.ImageField, and ‘upload_to’ attribute with attribute name ‘img’.

‘img’ is our subfolder, which is created inside ‘media’ folder after we upload our first image. ‘img’ folder holds all the images we upload in our ‘app.model’.

Define a function which returns the model field in our Django Admin Page. In the Admin page, the function returns the list of image with the name field of our model above.

Now, register the model in order to show up in the Django Admin Page

Go to admin.py file in ‘myapp’ and register the model.

For example, we register our ‘Picture’ model as:

In the final step of setup, run the following two commands:

1. python manage.py makemigrations
2. python manage.py migrate

makemigrations command creates a schema for our database. A migrations file is created every time we run this command after we make changes to our model.

migrate command migrates this schema to the database. A table is created in the database to hold any objects we enter into the database. Database is ready to take our uploaded images.

Use command ‘python manage.py runserver’ again to run our development server. We can now login to our Admin page and upload our images. The admin page may look like this after adding pictures:

This is how we upload images from Django Admin Site

The snippet below shows the ‘img’ folder inside the ‘media’ folder where the images are uploaded to:

Thank you.