I don't wanna tinymce to use blobs for tiny images, because I'm converting those data:images to real images and I´m replacing the img src="" after I have real images. How could I manage it to only get data:image images? Is it possible? I tried

automatic_uploads: false

but it won't change anything.

Here is my code:

tinymce.init({
    selector: strSelector + "textarea:not(#strDescription)",
    paste_data_images: true,
    image_advtab: true,
    mode: "specific_textareas",
    editor_selector: "mceEditor",
    automatic_uploads: false,
    file_picker_callback: function(callback, value, meta) {
        if (meta.filetype == 'image') {
            $('#upload').trigger('click');
            $('#upload').on('change', function() {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    callback(e.target.result, {
                        alt: ''
                    });
                };
                reader.readAsDataURL(file);
            });
        }
    },
    plugins: [
        "advlist autolink lists link image imagetools charmap preview anchor code",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime table contextmenu paste imagetools"
    ],
    setup: function(editor) {
        editor.on('change', function() {
            editor.save();
        });
    }
});

I don't wanna tinymce to use blobs for tiny images, because I'm converting those data:images to real images and I´m replacing the img src="" after I have real images. How could I manage it to only get data:image images? Is it possible? I tried

automatic_uploads: false

but it won't change anything.

Here is my code:

tinymce.init({
    selector: strSelector + "textarea:not(#strDescription)",
    paste_data_images: true,
    image_advtab: true,
    mode: "specific_textareas",
    editor_selector: "mceEditor",
    automatic_uploads: false,
    file_picker_callback: function(callback, value, meta) {
        if (meta.filetype == 'image') {
            $('#upload').trigger('click');
            $('#upload').on('change', function() {
                var file = this.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    callback(e.target.result, {
                        alt: ''
                    });
                };
                reader.readAsDataURL(file);
            });
        }
    },
    plugins: [
        "advlist autolink lists link image imagetools charmap preview anchor code",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime table contextmenu paste imagetools"
    ],
    setup: function(editor) {
        editor.on('change', function() {
            editor.save();
        });
    }
});

• javascript
• jquery
• tinymce

2 Answers 2

Blob conversion can be disabled by adding the filter below:

TinyMCE docs: images_dataimg_filter

tinymce.init({
   images_dataimg_filter: function(img) {
      return img.hasAttribute('internal-blob');
  }
});

Given the fact the images_dataimg_filter approach is deprecated in 5.3, the approach below can accomplish similar within v6 (6.3.2 at the time of writing this). What this snippet does is uses the images_upload_handler to capture the upload. From there, it intercepts the blob and converts it to a base64 image. Ultimately, you can do whatever you need to within the context of a Promise:

const base64_img_handler = (blobInfo) => new Promise((resolve) => {
            resolve("data:image/png;base64," + blobInfo.base64());
        });    

tinymce.init({    
        ....
        images_upload_handler: base64_img_handler,
        ....
    });