upload image after crop in tinymce 4

Question

I am working on tinymce and I have implemented imagetools. Now when image gets inserted in the text editor and then I edit/crop the image it changes the image src to something like blob:www.localhost/asdf-ghij.

What I want is after cropping I can send this url to my php script so that i can save this image on my server. But I have no idea of the event/function that i should use.

here is my code:

tinymce.init({
    selector:'textarea',
    plugins:[
        'advlist autolink lists link image imagetools charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table contextmenu paste code'
    ],
    toolbar:'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code',
    height:300,
    imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
    automatic_uploads: false,
    remove_script_host : false,
    convert_urls : false,
    relative_urls : false,
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    },
    file_browser_callback_types: 'file image media',
    file_browser_callback: function(field_name, url, type, win) {
        tinymce.activeEditor.windowManager.open({
            title: 'Browse Image',
            file: '/admin/images/show-images',
            width: 1200,
            height:400,
            resizable : "yes",
            close_previous : "no",

            buttons: [{
                text: 'Insert',
                classes: 'widget btn primary first abs-layout-item',
                disabled: false,
                onclick: 'close'
            }, {
                text: 'Close',
                onclick: 'close',
                window : win,
                input : field_name
            }]
        }, {
            oninsert: function(url) {
                win.document.getElementById(field_name).value = url;
            }
        });
        return false;
    }
});

Everything is working fine. except the problem I mentioned.

Answer 1

Ok so i figured it out.

All I had to do was set automatic_uploads:true. and implement images_upload_handler.

It will automatically upload the image that you will edit. It takes image new url in response.

Here is the code in case someone needs for future reference.

tinymce.init({
    selector:'textarea',
    plugins:[
        'advlist autolink lists link image imagetools charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table contextmenu paste code'
    ],
    toolbar:'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code',
    height:300,
    imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage imageoptions",
    automatic_uploads: true,
    remove_script_host : false,
    convert_urls : false,
    relative_urls : false,
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    },
    file_browser_callback_types: 'file image media',
    file_browser_callback: function(field_name, url, type, win) {
        tinymce.activeEditor.windowManager.open({
            title: 'Browse Image',
            file: '/admin/images/show-images',
            width: 1200,
            height:400,
            resizable : "yes",
            close_previous : "no",

            buttons: [{
                text: 'Insert',
                classes: 'widget btn primary first abs-layout-item',
                disabled: false,
                onclick: 'close'
            }, {
                text: 'Close',
                onclick: 'close',
                window : win,
                input : field_name
            }]
        }, {
            oninsert: function(url) {
                win.document.getElementById(field_name).value = url;
            }
        });
        return false;
    },
    images_upload_handler: function(blobInfo, success, failure){
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST','/admin/images/upload-blob');
        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            success(json.url);
        };
        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());
        xhr.send(formData);
    }
});

Answer 2

Change automatic_uploads to true and add images_upload_url will do:

tinymce.init({
  selector:'textarea',
  automatic_uploads: true,
  images_upload_url: 'postAcceptor.php'
});

The new created images will get file-names as 'imagetools0.jpg', 'imagetools1.jpg', etc.

N.B. The source for postAcceptor.php can be found at PHP Upload Handler page of the TinyMCE website.