0
votes

I am building a Dev-blog to store and refer to project I've coded for my portfolio, and I've been trying to add a media upload capability to my post text boxes. I started off by using a standard RichTextField, which had a built-in function to add Images through URL(No uploading). It worked fine, but I wanted the ability to upload photos from my machine.

The blog is fully operational (on a local server for development), so all irrelevant code was disregarded.

The only problem is with setting the paths to my image files.

models.py


    from django.db import models
    from django.utils import timezone
    from django.urls import reverse
    from ckeditor_uploader.fields import RichTextUploadingField
    
    class Post(models.Model):
        author=models.ForeignKey('auth.User',on_delete=models.CASCADE)
        title= models.CharField(max_length=40)
        text = RichTextUploadingField()
        create_date = models.DateTimeField(default=timezone.now())
        publication_date = models.DateTimeField(blank=True,null=True)
    
        def publish(self):
            self.publication_date=timezone.now()
            self.save()
    
        def approve_comment(self):
            return self.comments.filter(approved_comment=True)
    
        def __str__(self):
            return self.title
        
        def get_absolute_url(self):
            return reverse('post_detail', kwargs={'pk':self.pk})
    
        def ckeditor_upload(self):
            return reverse('post_detail', kwargs={'pk':self.pk})

urls.py


    from django.contrib import admin
    from django.urls import path,include,re_path
    from django.contrib.auth import views
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('',include('blog.urls')),
        path('accounts/login/',views.LoginView.as_view(template_name='registration/login.html'),name='login'),
        path('accounts/logout/',views.LogoutView.as_view(),name='logout',kwargs={'next_page':'/'}), #{'next_page':'/'} makes it go back to homepage
        re_path(r'^ckeditor/', include('ckeditor_uploader.urls')),
    
    ]

**settings.py**
<pre>

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

#
#
#

CKEDITOR_UPLOAD_PATH = 'media/uploads'
The file is being uploaded to a new media directory in the project folder, but it is trying to load it from within the app folder. 
<pre>
[20/Sep/2021 02:58:14] "POST /ckeditor/upload/ HTTP/1.1" 200 86
Not Found: /media/uploads/2021/09/20/kaki.jpg
[20/Sep/2021 02:58:14] "GET /media/uploads/2021/09/20/kaki.jpg HTTP/1.1" 404 4602
Not Found: /media/uploads/2021/09/20/kaki.jpg
[20/Sep/2021 02:58:14,942] - Broken pipe from ('127.0.0.1', 54571)

What I tried:

  • CKEDITOR_UPLOAD_PATH = 'blog/media/uploads' - Same results but inside the blog(app) folder.
  • Moving the image file manually to the apps media directory - the image loaded, but that's kinda pointless
  • Adding root variables
    MEDIA_URL='/media/'
    MEDIA_ROOT= os.path.join(BASE_DIR,'blog/media')
    CKEDITOR_UPLOAD_PATH = 'uploads'
    
    - Same error
    [20/Sep/2021 03:34:48] "POST /ckeditor/upload/ HTTP/1.1" 200 95
    Not Found: /blog/media/uploads/2021/09/20/linkdn.jpg
    [20/Sep/2021 03:34:48] "GET /blog/media/uploads/2021/09/20/linkdn.jpg HTTP/1.1" 404 4623
    Not Found: /blog/media/uploads/2021/09/20/linkdn.jpg
    [20/Sep/2021 03:34:48] "GET /blog/media/uploads/2021/09/20/linkdn.jpg HTTP/1.1" 404 4623
  • Tried looking in the docs
Add a CKEDITOR_UPLOAD_PATH setting to the project’s settings.py file. This setting specifies a relative path to your CKEditor media upload directory. CKEditor uses Django’s storage API. By default, Django uses the file system storage backend (it will use your MEDIA_ROOT and MEDIA_URL) and if you don’t use a different backend you have to have write permissions for the CKEDITOR_UPLOAD_PATH path within MEDIA_ROOT, i.e.:

CKEDITOR_UPLOAD_PATH = "uploads/"

When using default file system storage, images will be uploaded to the “uploads” folder in your MEDIA_ROOT and URLs will be created against MEDIA_URL (/media/uploads/image.jpg).

If you want to be able to have control over filename generation, you have to add a custom filename generator to your settings: 
- Nothing worked.
  • Tried uploading to statics - Made a total mess.

Guiding questions:

  • If CKEDITOR_UPLOAD_PATH is the upload path, Can I specify a load path, or am I left with MEDIA ROOT

  • I there a default value controlling the load path?

  • Is there maybe a different Rich text and upload box that will fit better?

Thanks in advance to anyone who helps!<3