Trumbowyg: Django server can detect file upload but not image URL input

Question

I'm using Trumbowyg, a WYSIWYG JavaScript editor which has a feature of rendering images from URLs pasted in. It also has an upload plugin which enables uploading local images and custom server side handling.

My python/django function upload_image() can successfully detect the uploaded image - however when I use the URL image input, my python function cannot detect it. Trumbowyg simply renders the image without going through my python backend.

Here's my code:

$('#id_content').trumbowyg({
    btnsDef: {
        // Create a new dropdown
        image: {
            dropdown: ['insertImage', 'upload'],
            ico: 'insertImage'
        }
    },
    // Redefine the button pane
    btns: [
        ['strong', 'em', 'del'],
        ['link'],
        ['image'], // Our fresh created dropdown
    ],
    plugins: {
        // Add imagur parameters to upload plugin for demo purposes
        upload: {
            serverPath: '/upload_image/',
            fileFieldName: 'content_image',
            urlPropertyName: 'url'
        }
    }
});

def upload_image(request):
    print('Success') #only prints when I use the upload input, not the URL input

Why can in detect the uploaded image but not the URL input?

Added. I use `upload_image()` in other places and it works fine, (by using `url: '/upload_image/',` in my ajax calls. — Zorgan, Jul 04 '18 at 07:05
"Why can in detect the uploaded image but not the URL input?" Because that javascript framework doesn't support that and you need to do your own hooks — Dmitrii G., Jul 07 '18 at 05:19
Ah ok. Any suggestions how I can go about that? The insert URL function is here I believe: https://github.com/Alex-D/Trumbowyg/blob/develop/src/trumbowyg.js#L1305 — Zorgan, Jul 07 '18 at 05:33

score 4 · Accepted Answer · answered Jul 12 '18 at 13:22

As already pointed, Trumbowyg doesn't send the URL to backend if the user uploads the image using a URL.

But if you really want to host the images on your own server, there's a way you can do that.

When the user submits the form, you'll receive the content of the textarea in your backend. You can then read the content and look for <img src="..."> tag.

At that point, you can check if the src value doesn't start with your S3 bucket hostname, you can download that image using urllib or requests library, save it to your bucket and replace the src value.

Since the submitted data will be in HTML format, check out the excellent Beautiful Soup. It will make parsing HTML easy.

Trumbowyg: Django server can detect file upload but not image URL input

1 Answers1