In this Django tutorial we will see how to upload image in Django Admin. Before you start you need to install pip pillow.
pip install Pillow
Step 1. Create Django 4 Project
Run below command to create Django project.
django-admin startproject project_name
Now you need to create Django app by running below command.
python manage.py startapp myapp
Add myapp in setting path
# settings.py
INSTALLED_APPS = [
...
'myapp', #new
...
Step 2. Connect to MySql Database
Now you need to configuration add the database credentials. you can use Postgresql database or Mysql for this project we will use mysql.
project_name/settings.py
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'database_name',
'USER': 'user_name',
'PASSWORD': 'your_password',
'HOST': 'localhost',
'PORT': '3306',
}
}
Step 3. Create Models For Myapp
Next, you need to create models for my app.
myapp/models.py
from django.db import models
class Myapp(models.Model):
title = models.CharField(max_length=200)
description = models.TextField(blank=True)
photo_main = models.ImageField(upload_to='photos/%Y/%m/%d/')
def __str__(self):
return self.title
Now you need Myapp model in admin.
myapp/admin.py
from django.contrib import admin
from .models import Myapp
from django.utils.safestring import mark_safe
class MyappAdmin(admin.ModelAdmin):
list_display = ('id', 'title', 'display_image')
list_display_links = ('id', 'title')
def display_image(self, obj):
if obj.photo_main:
return mark_safe('<img src="{}" height="100" width="100" />'.format(obj.photo_main.url))
return None
display_image.allow_tags = True
display_image.short_description = 'Image'
admin.site.register(Myapp, MyappAdmin)
Step 4. Migrate Database and Create Super User Admin
Next, you need to migrate database run below command.
python manage.py makemigrations
# and
python manage.py migrate
After migration you need to create superuser to access admin panel.
python manage.py createsuperuser
You will be prompted to enter details for the superuser account, including: Username, Email address, Password (twice).
(myenv) ~/path/to/your/project$ python manage.py createsuperuser
Username: admin
Email address: [email protected]
Password:
Password (again):
Superuser created successfully.
Login your admin panel by below url.
http://127.0.0.1:8000/admin
![django admin for image upload](https://pleypot.com/wp-content/uploads/2024/04/gsdrl3pwqZqZ5WLE2A8OSArGyKTtHNkdU8pCgPdH.png)
Step 5. Add Media URL & Root Path
Next, you need to add MEDIA_URL, MEDIA_ROOT path in project_name/setting.py.
If you are using old Django project then use below code.
project_name/setting.py
# Media Folder Settings
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
Or If you are using new latest Django project then use below code.
MEDIA_URL = "/media/"
MEDIA_ROOT = BASE_DIR / "media"
Now add MEDIA_URL, MEDIA_ROOT in project_name/urls.py.
project_name/urls.py
from django.contrib import admin
from django.urls import path, include # new
from django.conf import settings #new
from django.conf.urls.static import static #new
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('myapp.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # new
Step 6. Upload image and Check
Next, you need Click Myapp and upload image.
![upload image in django admin](https://pleypot.com/wp-content/uploads/2024/04/EDQvwK8ubNZrwxcvJw7ounskcgeaTUOJ3BvLqHCv.png)
Now check image show working.
![show upload image in django admin](https://pleypot.com/wp-content/uploads/2024/04/6QXuElFBNRltxKJI0B9nqw2oBZhssP9DEUKwePRl-1024x289.png)
Saim
![](https://pleypot.com/wp-content/uploads/2024/07/saim-1-3-1-1.jpg)
Hi there! My name is Saim and I’m excited to dive headfirst into the world of Python Django. I’m eager to learn and grow every step of the way, and I’ll be documenting my journey through blog posts. I’ll share the highs, lows, and everything in between with you. Together, let’s uncover the wonders of Python Django and its endless possibilities in web development.