Ckeditor5: Unable to use authenticated upload

[felipegiotto]

Hi! I would like to make an authenticated call to my backend (with a JWT token) so I can upload an image to the server, but the plugin always make a simple POST request, without the "Authorization: Bearer ..." header.

With a simple modification on the "UploadAdapter._initRequest()", I was able to do it, but I think this should be available natively in the component.

Thanks!

[Reinmar]

Hi! This package is an adapter for CKFinder server connector. It works out of the box with it (after configuring upload URL).

If you don't use CKFinder, you may need to use another adapter. You can implement one yourself or e.g. use a generic ckeditor5-simple-upload (3rd party; doesn't support configuring headers yet but most likely the author would be open for a pull request).

[felipegiotto]

Thanks, Reinmar! Actually, I decided to use a different approach: I made a plugin to convert the image to base64, so the document can be "self contained". There's also an option to limit the maximum image width and height, resizing locally, if needed. If you (or any other developer) want the code, here it is:

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';

/**
 * @author [email protected]
 */
export default class UploadAdapterLocalPlugin extends Plugin {

    /**
     * @inheritDoc
     */
    static get requires() {
        return [FileRepository];
    }

    /**
     * @inheritDoc
     */
    static get pluginName() {
        return 'UploadAdapterLocalPlugin';
    }

    /**
     * @inheritDoc
     */
    init() {

        const maxSize = this.editor.config.get('uploadadapterlocal.maxSize');

        this.editor.plugins.get(FileRepository).createUploadAdapter = loader => new UploadAdapter(loader, maxSize);
    }

}

class UploadAdapter {

    constructor(loader, maxSize) {
        this.loader = loader;
        this.maxSize = maxSize;
        console.log("constructor maxSize", maxSize);
    }

    upload() {

        var maxSize = this.maxSize;
        var file = this.loader.file;
        return new Promise((resolve, reject) => {

            // Create a file reader
            var reader = new FileReader();

            // Set the image once loaded into file reader
            reader.onload = function (e) {
                let content = e.target.result;

                console.log("maxSize", maxSize);
                if (maxSize) {

                    // Create an image
                    var img = document.createElement("img");
                    img.src = content;

                    var width = img.width;
                    var height = img.height;

                    let shouldResize = false;
                    if (width > height) {
                        if (width > maxSize) {
                            height *= maxSize / width;
                            width = maxSize;
                            shouldResize = true;
                        }
                    } else {
                        if (height > maxSize) {
                            width *= maxSize / height;
                            height = maxSize;
                            shouldResize = true;
                        }
                    }

                    let contentAfter;
                    if (shouldResize) {
                        var canvas = document.createElement("canvas");
                        var ctx = canvas.getContext("2d");
                        ctx.drawImage(img, 0, 0);

                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0, width, height);
                        var dataurl = canvas.toDataURL("image/png");
                        content = dataurl;
                    }
                }

                resolve({ uploaded: true, default: content });
            }

            reader.readAsDataURL(file);
        });
    }

    abort() {
    }
}

Thanks once again!

Regards,

Felipe Giotto.

[Ruud-cb]

@Reinmar I don't really understand your comment. I (and probably OP as well) do use CKfinder within CKeditor, I want to use this adapter, I just want to add an Bearer/JWT token to the headers so I can upload it with an authenticated request. Why not add a line of code here, something like :
const headers = this.editor.config.get( 'ckfinder.headers' );.

Pass those headers down to the constructor of UploadAdapter (optional of course).

Then add another line here to check if headers are given, if so add them with:

xhr.setRequestHeader(header, value).

To keep it generic I would recommend that the ckfinder.headers is a list of value-pairs.

What's the exact problem what keeps you away from implementing this?

Practically everyone is now creating their own plugin because one cannot use authenticated requests...

[qqaimh]

In my opion, this is just like no node.js connector

[Exlord]

So this is a no go!!! and I have to make a custom build uploader and editor just so I can add a simple JWT token to the request????