Using TinyMCE editor to hold image as base 64 before form submission

Question

I'm making a Javascript app that collects the contents of a TinyMCE editor and sends it all to the server in a single post. I'm trying to allow the user to upload images into the editor, but I can't figure out how to do it without submitting the images at the time they're uploaded to a server-side image handler. I need a way to submit all images and text in one post.

I don't know a lot about handling images, but my thinking is that I can accomplish this by collecting the images as base64 strings and sending them along with the rest of the html input. First question: Is my line of thinking correct?

Second question: How do I accomplish this? I've managed to encode an uploaded image as base 64, but the TinyMCE editor image upload dialog box gets stuck open as if it's still uploading even after I already have the base 64 string.

index.html:

tinymce.init({
  selector: '.texteditor',
  plugins: 'autoresize code hr image link lists media searchreplace table charmap anchor help',
  images_upload_url: 'scripts/image_upload.js',
  images_upload_handler: function () {
    console.log("heres the image_upload_handler"); //This never fires
    upload_image();
  },
  automatic_uploads: true,
});

image_upload.js:

function upload_image(event) {

    const dropzone = document.getElementsByClassName('tox-dropzone')[0];
    var fileInput = dropzone.getElementsByTagName('input')[0];
    var files = fileInput.files;
    var file = files[0];
    console.log("File " + file.name + " is " + file.size + " bytes in size");
    getBase64(file);
}

function getBase64(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
        console.log(reader.result);  //This successfully prints the base 64 string, but the editor's dialog box won't close and the image never appears in the editor
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };
}

When I upload an image using the editor, the result is this:

The console shows the image encoded as base 64, but the dialog box won't close. What do I need to do differently? Vanilla Javascript, please.

Answer 1

You misunderstand the purpose of images_upload_url - that parameter should point to a server side endpoint that processes the Base64 image and returns a new URL that is used in the <img> tag's src attribute for the image.

https://www.tiny.cloud/docs/general-configuration-guide/upload-images/

You also should not use images_upload_url and images_upload_handler - they are two different ways for TinyMCE to POST the image for processing to a server. As you have seen, if you define images_upload_url TinyMCE won't try to use images_upload_handler. You really only need images_upload_handler if our images_upload_url is not doing what you need.

The documentation page I referenced above should have the default code we execute when using images_upload_url.

I would note that you ask if you can send the Base64 images with the content when you submit the data. You can absolutely do that but the HTML payload will be significantly larger as the image binary content is now part of the HTML itself as opposed to stored externally as an image on a server (e.g. a PNG file).

Base64 images also block the browser from rendering any other HTML on the page while they process the Base64 data - this is generally considered bad for page load times.