CODEWITHSUNDEEP
javascripttinymcetinymce-4
Krishnaraj
Krishnaraj

Reputation: 2420

TinyMCE - Submit form after image is replaced

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);
        });
    });

Upvotes: 0

Views: 1293

Answers (2)

Serg
Serg

Reputation: 7475

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!
    }

Upvotes: 0

sangress
sangress

Reputation: 609

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 );

Upvotes: 1

Related Questions