[Django]-Ckeditor_uploader Dynamic Image Upload Path

by

0👍

✅

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)
👤chirinosky

0👍

I was faced with the same problem and looked at your answer, but I think there is a potentially easier solution.

For every ‘unique’ upload action that is to be performed, create a new config in settings.py:

CKEDITOR_CONFIGS = {
    'action_a' : {
        'filebrowserUploadUrl': '/path/to/action/a/handling/view/'
    },
    'action_b' : {
        'filebrowserUploadUrl': '/path/to/action/b/handling/view/'
    }
}

When creating your form, set the config_name of the CKEditorUploadingWidget to the required action.

If you don’t need to handle any URL parameters – like in my case, where I just wanted to put files uploaded via a different editor interface in a different directory – then next steps are relatively straightforward. Handle and save the uploaded file in your corresponding view.

If you do need to perform an action based on URL parameters, however, you could examine the request in the corresponding view to get the page where the file was uploaded from:

referrer = request.META.get('HTTP_REFERER')

You could then extract the parameters from the URL that you need – in your case the report ID and finding ID – and use them to upload to whatever directory you want.

👤alstr

Leave a comment