ckeditor_uploader Dynamic Image Upload Path

Question

I have a Django application that requires users to upload multiple images per document. The application has django-ckeditor installed, but the uploaded images end up in the same folder set by the CKEDITOR_UPLOAD_PATH setting. I would like the path to be dynamic, based on the URL scheme.

For example, images uploaded to the CKEditor instance on https://myapp/report/1/finding/5 should reside in /ckeditor_base_path/report/1/finding/5/my_img.png.

Unfortunately, the URL for the view function that handles setting the path is set by the widget (CKEditorUploadingWidget) before the view creates a context parameter.

I was hoping to send the parameters URL parameters to ImageUploadView for processing. Any help or advice on this is greatly appreciated.

Answer 1

In case it helps anyone else, here's what I did. When users browse, they will be restricted to the folder with the finding images, since they are specific to that part of the report. Similarly, uploading an image will send it to the same folder.

In a nutshell, you have to:

1. Point the CKEditor Uploader URLs to your version of the views
2. Update the CKEditor Uploader widget through the corresponding form views
3. Override the CKEditor Uploader ImageUploadView and browse views to create the path you want

Examples

Updated CKEditor URL Paths

path('myapp/<int:org_id>/report/<int:report_id>/finding/<int:finding_id>/image/upload', never_cache(ck_views.upload),
path('myapp/<int:org_id>/report/<int:report_id>/finding/<int:finding_id>/images', never_cache(ck_views.browse), name='ckeditor_browse'),

Widget Update

def get(self, request, *args, **kwargs):
        context = {}
        obj = self.get_object()
        if obj is not None:
            context['org'] = obj.report.org.id
            form = FindingForm(instance=obj)
            # Set image browse/upload path
            image_kwargs = {
                'finding_id': obj.id,
                'org_id': obj.report.org.id,
                'report_id': obj.report.id,
            }
            image_browse_path = reverse('ckeditor_browse', kwargs=image_kwargs)
            image_upload_path = reverse('ckeditor_upload', kwargs=image_kwargs)
            form.fields['description'].widget.config['filebrowserBrowseUrl'] = image_browse_path
            form.fields['description'].widget.config['filebrowserUploadUrl'] = image_upload_path
            context['form'] = form
        return render(request, self.template_name, context)