How to Ckeditor Image Upload in Django Python ?

Published On: 14/07/2022 | Category: Django Python

Hi Dev,

In this tutorial, I will show you how to multiple image upload in python django. This post will give you simple example of how to multiple image upload in python django app. We will look at example of how to multiple image upload in python django bootstrap. if you want to see example of how to multiple image upload in python django example then you are a right place.

So, CKEditor is a rich text WYSIWYG editor. This article shows how to add a RichTextUploading field to a model that enables all basic CKEditor features plus allows users to upload images.

Here i explained simply step by step example of how to multiple image upload in python django in database.

Step 1 : Create a Project

In this step, we’ll create a new django project using the django-admin. Head back to your command-line interface and run the following command:

django-admin startproject ckEditor

Step 2 : Create a App

python3 manage.py startapp core

Step 3 : Install Django-CKEditor Library

First of all we can install the django-ckeditor library. let us see how to use this library.

pip install django-ckeditor

Step 4 : Update setting.py

In this step we require to do two things in our settings.py file, One is to change the path of template look up directory. Second one is to configure our media folder. Add the below lines to your settings.py file:

And, also in settings.py, set STATIC_URL, MEDIA_URL, and CKEDITOR_UPLOAD_PATH

Next, you need to add it in the settings.py file as follows:

import os

....
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'core',
    'ckeditor',
    'ckeditor_uploader',
]

....
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

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

CKEDITOR_UPLOAD_PATH = "uploads/"
....

Let me one things clear in MEDIA_URL, you must add the first slash / because, without it, the images will not appear.

Step 5: Create a Model

In this step we will To represent our model in the admin interface, add this line in models.py add the following code:

core/models.py

from django.db import models
from ckeditor_uploader.fields import RichTextUploadingField


class Blog(models.Model):
    title = models.CharField(max_length=100)
    content = RichTextUploadingField()
    def __str__(self):
        return self.title

After creating these model, you need to create migrations using the following command:

Step 6 : Create a Migrations

python manage.py makemigrations

After successfully run the above command go to the core/migrations/0001_initial.py

core/migrations/0001_initial.py

# Generated by Django 3.2.3 on 2022-07-13 06:13

import ckeditor_uploader.fields
from django.db import migrations, models


class Migration(migrations.Migration):

    initial = True

    dependencies = [
    ]

    operations = [
        migrations.CreateModel(
            name='Blog',
            fields=[
                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
                ('title', models.CharField(max_length=100)),
                ('content', ckeditor_uploader.fields.RichTextUploadingField()),
            ],
        ),
    ]

Next, you need to migrate your database using the following command:

python manage.py migrate

Step 7 : Update the admin.py

In this step, we need to create the views for performing fetch record to the database.Open the core/admin.py file and add:

core/admin.py

from django.contrib import admin
from .models import *

# Register your models here.
admin.site.register(Blog)

Step 8 : Display Content of Editor on the Template

Next, to display the editor's content on an html page you need to do something like:

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>

     {{obj.content|safe}}

   </body>
</html>

Step 9 : Creating Urls

In this section, we’ll create the urls to access our views.Go to the urls.py ckEditor/urls.py file and update it as follows:

ckEditor/urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf.urls.static import static
from django.conf import settings

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

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Run the Server

In this step, we’ll run the local development server for playing with our app without deploying it to the web.

python manage.py runserver

Next, go to the http://localhost:8000/admin address with a web browser.

I Hope It will help you....

Previous Post
How to Play Video with React Native and Expo?

Next Post
How to Convert Any Input Value in Md5 using React Native?

How to Send Email to Multiple User using Django?

Django Python Form Validation Example

How to Autocomplete Search using Typeahead Js in Django ?

How to Integrate Stripe Payment Gateway in Python Django ?

How to use Limit and Offset in Django Query?

Python Django Get Current Date Example

How to Ckeditor Image Upload in Django Python ?

Related Posts