Search code examples
tinymcetinymce-5

TinyMCE 5.7 failure callback returns "[object Object]" no matter what


Seemingly strange problem here: I've got TinyMCE 5.7 up and running with the images_upload_handler function configured per the docs. If the upload is a success, everything works great. However, if the upload is a failure, then the dialog box that should output the failure message simply outputs "[object Object]".

Screenshot: Failure callback output

I find that this is the case whether I invoke the failure callback in the images_upload_handler function just as the docs dictate...

function gg_image_upload_handler (blobInfo, success, failure, progress) {
    [...]
    
    if (xhr.status < 200 || xhr.status >= 300) {
      failure('HTTP Error: ' + xhr.status);
      return;
    }

    [...]
}

...or if I make the entire images_upload_handler function a failure callback with a simple string, taking all the other variables (including the PHP upload handler) out of it:

function gg_image_upload_handler (blobInfo, success, failure, progress) {
    failure('hello!');
    return;
}

Notably, if I change the second example from "failure('hello!');" to "success('hello!');" then there is no problem: When I upload a photo in that case, "hello!" appears in the dialog box where the path to the uploaded image would normally appear.

I can't find anyone else who's had an issue with the failure callback, so I fear I've done something silly, but it seems weird that everything else works and this part does not. Any thoughts? Full Javascript code follows:

function gg_image_upload_handler (blobInfo, success, failure, progress) {
  var xhr, formData;

  xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'handlers/tinymce_photo_handler.php');

  xhr.upload.onprogress = function (e) {
    progress(e.loaded / e.total * 100);
  };

  xhr.onload = function() {
    var json;

    if (xhr.status === 403) {
      failure('HTTP Error: ' + xhr.status, { remove: true });
      return;
    }

    if (xhr.status < 200 || xhr.status >= 300) {
      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);
  };

  xhr.onerror = function () {
    failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
  };

  formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());

  xhr.send(formData);
};

tinymce.init({
    selector: "textarea#editor",
    images_upload_handler: gg_image_upload_handler,
    images_reuse_filename: true,
    skin: "oxide",
    plugins: "lists, link, image, media, image code",
    relative_urls: false,
    remove_script_host: false,
    toolbar:
    "h1 h2 h3 h4 h5 h6 bold italic strikethrough blockquote bullist numlist backcolor | link image media | removeformat help",
    image_caption: true,
    image_advtab: true,
    image_class_list: [
        {title: 'Responsive', value: 'img-fluid'}
    ],
    content_style: 'img { max-width: 75%; height: auto; }',
    menubar: false,
    setup: (editor) => {
        // Apply the focus effect
        editor.on("init", () => {
          editor.getContainer().style.transition =
            "border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out";
        });
        editor.on("focus", () => {
          (editor.getContainer().style.boxShadow =
            "0 0 0 .2rem rgba(0, 123, 255, .25)"),
            (editor.getContainer().style.borderColor = "#80bdff");
        });
        editor.on("blur", () => {
          (editor.getContainer().style.boxShadow = ""),
            (editor.getContainer().style.borderColor = "");
        });
    }
});

Solution

  • Unfortunately, this is a bug introduced in TinyMCE 5.7.0 as reported here: https://github.com/tinymce/tinymce/issues/6579. This will be fixed in the upcoming TinyMCE 5.7.1 patch release, however for now the best workaround is to downgrade to TinyMCE 5.6.2 sorry.