Search code examples
tinymce

Tinymce filenaming causes images to be overwritten when saved

Using TinyMce editor on a PHP-project for creating worklogs. The user can take a screenshot (ex greenshot, snipping tool) and paste this into the Tinymce editor. Tinymce will name the screenshot mceclip0.png (pic1), mceclip1.png (pic2) etc. The user saves the worklog and the images is uploaded to a folder on webserver with those names. So far so good.

When the user want to edit this worklog later and paste in a new image he/she forgot to add, this image will be name... mceclip0.png (pic3). If the user then saves this, oh oh, the first image from the first initial creating of the worklog will be overwritten. So pic1 will now look the same as pic3.

Here is when the first two pictures are added: enter image description here

And then the user wants to add a third picture, this happens: enter image description here

Below is the code that is used and from Tinymce. I've tried to change parameters according to documentation with no luck. Some say this is solved by

images_reuse_filename: true

But this is not the case for me. If I take a snipping tool of something and save it to disk it will be named "screenshot.png". In the Tinymce editor it changes to mceclip0.png anyways.

I was thinking I want to append date and time to the "mceclip.png" name, but I can't figure out how to do so. Would this be a solution?

Thanks in advance!

tinymce.init({
    selector: 'textarea',
    height: 600,
    plugins: 'image code paste',
    paste_data_images: true,
    image_file_types: 'jpg,webp,png',
    toolbar: 'undo redo | link image | code',
    automatic_uploads: true,
    images_upload_url: 'fileUpload.php',
    images_reuse_filename: true,

    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'fileUpload');
        xhr.onload = function () {
            var json;

            if (xhr.status !== 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }
            success(json.location);
        };
        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
    }

});
Solution

  • Seems like there is no way of changing the filename since it is a blob and set in clipboard.js in the TinyMce-plugin if I understand this correctly. Meaning the only way this is solvable (as far as I can see) is to change this serverside. I created then just a concatenation of unix timestamp and the filename to make it unique.

    Now the user can go back and edit the worklogs, adding screenshots without overwriting existing screenshots.