TinyMCE: Rename Image File Name Before Upload

I've been struggling with this.

I've got tinyMCE set up so that users can upload images, I have images_reuse_filename set to true, I have a custom images_upload_handler, and I have images_reuse_filename set to true.

In my custom upload handler, I console.dir the blobInfo (the upload handler has the signature (blobInfo, success, failure), which I think I got from the docs)

The problem is blobInfo.filename is a function with no way that I can see to set the filename.

I'm using tinyMCE for users to be able to create email templates, and I'm figuring they'll want to use some images such as logos, headers, across many templates.

When the page loads, I populate the image_list with their existing images.

The problem of course is blobid1587911717487.png is meaningless to the user. And I don't want to waste my database space with an extraneous table to store a title for tinyMCE.

What I want to do is capture the original filename, check it against a validFilenameChars function, then present the filename to the user in case s/he wants to alter it, then pass that along further down the train in the images_upload_handler.

Oh, and I need to handle when a user resizes the image.

I would include code, but it's a pain in the ass to strip code of non-relevant code to present the core of the issue, and, if you're intimately familiar with tinyMCE, I'll reckon you know what I'm talking about and don't need my code.

If you think/know you can figure it out and want the code, lemme know.

I've spent an inordinate amount of time trying to figure this out, any help will be appreciated.

I'm using Version: 5.2.1 of tinyMCE

Also, tinyMCE is a pretty powerful free html editor, I feel like I'm looking a gift-horse in the mouth by saying this, but wtf over? How did they miss that a user would upload images that would then be included in their image_list and maybe want sensible names? Is it just me? Maybe. TinyMCE is largely a black box to me, so dunno their internal decisions. So... if you know of another html editor that can be used in lieu of tinyMCE that is open-source, lemme know.

Also, great job on the new docs tinyMCE! Love 'em.

I figured out a hack-around that requires 2 posts to the server, one that uploads the image and then after that, another that will rename the file on the server. Then I pass the new location on to the success function. My code's a little hacky too, but I was just after proof of concept.

function (blobInfo, success, failure) {
    var self = this;
    var xhr = new XMLHttpRequest();

    xhr.withCredentials = false;
    xhr.open('POST', self.imagesUploadUrl);

    xhr.onload = function () {

        var json = JSON.parse(xhr.responseText);

        // I have a DTO on the server that separates out the filename
            from the path and file extension
        var filename = prompt('If you plan on reusing this image in other templates, rename the file so that it\'s easily recognizable in your images list', json.filename);

        if (filename && filename !== json.filename) {
            json.filename = filename;

            axios.post(self.imageRenameUrl, json)
                .then(function (r) {
                    var renamedImage = r.data;
                    success(renamedImage.location);
                })
        }
        else {
            success(filename);
        }
    };

    var formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    xhr.send(formData);
}