CODEWITHSUNDEEP
javascripttinymce
Mark
Mark

Reputation: 1

How to upload image with tinymce using file picker handler and images_upload_handler

By default tinymce image has no browse button where you can click and see a dialog box to choose an image. In my code am trying to add image picker button to tinymce but am finding it difficult to combine it with the images_upload_handler. And lastly how do i use the success callback to update images_upload_base_path. 

tinymce.init({
    ...
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', "postAcceptor.php");

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

Upvotes: 0

Views: 6058

Answers (1)

Axel186
Axel186

Reputation: 561

I don't really understand why, but for me images_upload_handler not works as well... =(

Use file_picker_callback instead, like in this example that I found: https://codepen.io/nirajmchauhan/pen/EjQLpV

Upvotes: 1

Related Questions