Ruby on Rails API + VueJS + CKEditor image upload to S3

Question

I have a Rails API in my back-end and a Vue.JS app in the front-end. There some feature that allow users to upload images to the AWS S3 (I send a Base64 image to the API and upload the files using Carrierwave... it works like a charm!)

But now I have to allow the users to write text in the CKEditor5 and insert images to the body text. How is the best way to do that? I was thinking about to send a Base64 images inside a HTML body text and extract them in the API but I'm looking for a better approach/ideas.

Thanks!

Answer 1

At the end, I was looking in the CKEditor docs and found this link: https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html

So I realize that there's a uploadUrl param to set my back-end endpoint and it should just return de AWS S3 url to magically be replace in the text body and voilá!

        simpleUpload: {
            // The URL that the images are uploaded to.
            uploadUrl: 'http://example.com',

            // Enable the XMLHttpRequest.withCredentials property.
            withCredentials: true,

            // Headers sent along with the XMLHttpRequest to the upload server.
            headers: {
                'X-CSRF-TOKEN': 'CSRF-Token',
                Authorization: 'Bearer <JSON Web Token>'
            }
        }

I was thinking in a whole crazy solution instead of read the docs properly!