Django Image Upload with CKeditor5 does not work(Couldn't upload file: xyz.webp)

SYSTEM INFORMATION
OS type and version Ubuntu Linux 22.04.4
Webmin version 2.111
Virtualmin version 7.10.0 Pro
Related packages SUGGESTED

I have installed Django and find it okay so far in .local, but I cannot upload images via CKeditor 5, which I use through django-ckeditor-5.

settings.py

CKeditor

customColorPalette = [
{
‘color’: ‘hsl(4, 90%, 58%)’,
‘label’: ‘Red’
},
{
‘color’: ‘hsl(340, 82%, 52%)’,
‘label’: ‘Pink’
},
{
‘color’: ‘hsl(291, 64%, 42%)’,
‘label’: ‘Purple’
},
{
‘color’: ‘hsl(262, 52%, 47%)’,
‘label’: ‘Deep Purple’
},
{
‘color’: ‘hsl(231, 48%, 48%)’,
‘label’: ‘Indigo’
},
{
‘color’: ‘hsl(207, 90%, 54%)’,
‘label’: ‘Blue’
},
]

CKEDITOR_5_CONFIGS = {
‘default’: {
‘toolbar’: [‘heading’, ‘|’, ‘bold’, ‘italic’, ‘link’,
‘bulletedList’, ‘numberedList’, ‘blockQuote’, ‘imageUpload’, ],

},
'extends': {
    'blockToolbar': [
        'paragraph', 'heading1', 'heading2', 'heading3',
        '|',
        'bulletedList', 'numberedList',
        '|',
        'blockQuote',
    ],
    'toolbar': ['heading', '|', 'outdent', 'indent', '|', 'bold', 'italic', 'link', 'underline', 'strikethrough',
    'code','subscript', 'superscript', 'highlight', '|', 'codeBlock', 'sourceEditing', 'insertImage',
                'bulletedList', 'numberedList', 'todoList', '|',  'blockQuote', 'imageUpload', '|',
                'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'mediaEmbed', 'removeFormat',
                'insertTable',],
    'image': {
        'toolbar': ['imageTextAlternative', '|', 'imageStyle:alignLeft',
                    'imageStyle:alignRight', 'imageStyle:alignCenter', 'imageStyle:side',  '|'],
        'styles': [
            'full',
            'side',
            'alignLeft',
            'alignRight',
            'alignCenter',
        ]

    },
    'table': {
        'contentToolbar': [ 'tableColumn', 'tableRow', 'mergeTableCells',
        'tableProperties', 'tableCellProperties' ],
        'tableProperties': {
            'borderColors': customColorPalette,
            'backgroundColors': customColorPalette
        },
        'tableCellProperties': {
            'borderColors': customColorPalette,
            'backgroundColors': customColorPalette
        }
    },
    'heading' : {
        'options': [
            { 'model': 'paragraph', 'title': 'Paragraph', 'class': 'ck-heading_paragraph' },
            { 'model': 'heading1', 'view': 'h1', 'title': 'Heading 1', 'class': 'ck-heading_heading1' },
            { 'model': 'heading2', 'view': 'h2', 'title': 'Heading 2', 'class': 'ck-heading_heading2' },
            { 'model': 'heading3', 'view': 'h3', 'title': 'Heading 3', 'class': 'ck-heading_heading3' }
        ]
    }
},
'list': {
    'properties': {
        'styles': 'true',
        'startIndex': 'true',
        'reversed': 'true',
    }
}

STATICFILES_DIRS = [os.path.join(BASE_DIR, “static”)]
MEDIA_ROOT = os.path.join(BASE_DIR, ‘media’)

STATIC_ROOT = os.path.join(BASE_DIR, ‘static/’)

STATIC_URL = ‘static/’
MEDIA_URL = ‘media/’

url.py

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

urlpatterns = [
# System
path(‘admin/’, admin.site.urls),
path(‘accounts/’, include(‘django.contrib.auth.urls’)),
path(“ckeditor5/”, include(‘django_ckeditor_5.urls’)),
# Feel Free
path(‘’, include(‘start.urls’)),
path(‘pwc/’, include(‘passwordcheck.urls’)),
path(‘post-it/’, include(‘postits.urls’)),
path(‘wiki/’, include(‘mywiki.urls’)),
# PIT

path('dashboard/', include('dashboard.urls')),
path('pit/', include('pit.urls')),
path('logistik/', include('logistik.urls')),
# Orga
path('kurs/', include('kurse.urls')),
path('trainer/', include('trainer.urls')),

path('kunden/', include('kunden.urls')),
# Ticket
path('tickets/', include('tickets.urls')),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

chmod media folder and .local folder are 777.
Debug with Firefox Konsole:
POST
https://xxxxxxxx/ckeditor5/image_upload/
Status
403

With localhost:8000 it works on my Computer

Two things:

We don’t maintain Django or CKEditor. We have no idea.

Always wrap config files in code tags (triple backticks ```) or used the Preformatted Text button in the menu of the editor, so the files don’t get mangled (comments turn into headings and some tags get deleted).

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.