TinyMCE - Submit form after image is replaced

Question

I am using tinymce 4 with a custom image upload handler and doing an ajax form submit within tinymce.activeEditor.uploadImages.

The problem is, the uploadImages callback is called immediately after the image is uploaded and before the image url is replaced in the editor. Due to this images are still like img src="data:image/png;base64,undefined" alt="" width="534" height="232" /> instead of the actual server url.

Here's the code

tinymce.init({
        selector: '#mytextarea',
        menubar: false,
        plugins: [
            ...
        ],
        automatic_uploads: true,
        file_picker_callback: function (cb, value, meta) {
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            input.onchange = function () {
                var file = this.files[0];

                var id = 'blobid' + (new Date()).getTime();
                var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                var blobInfo = blobCache.create(id, file);
                blobCache.add(blobInfo);

                // call the callback and populate the Title field with the file name
                cb(blobInfo.blobUri(), {title: file.name});
            };

            input.click();
        },
        images_upload_handler: function (blobInfo, success, failure) {
            var formData = new FormData();
            formData.append('attachedFile', blobInfo.blob(), blobInfo.blob().name);

            $.ajax({
                url: '/myUploadUrl?method=uploadFile&param1=' + someParam,
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function (data) {
                    success(data.location);
                }
            });
        },
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
        }
    });

To submit form, I am doing the following

tinymce.activeEditor.uploadImages(function (success) {
        $.post('/mySubmitUrl?method=save', $('#myForm').serialize(), function (response) {
            location.reload(true);
        });
    });

Answer 1

if you want to submit your form after the image is replaced in the editor just call this code

    $.post('/mySubmitUrl?method=save', $('#myForm').serialize(), function (response) {
        location.reload(true);
    });

after calling 'succcess' function:

    success: function (data) {
        success(data.location);
        // call it from here!
    }

Answer 2

I had similar issue and solved it with FileReader:

cb = callback (in your case: success)

var FR= new FileReader();

FR.addEventListener("load", function(e: any) {
    cb(e.target.result, { title: file.name });
});

FR.readAsDataURL( file );