0

I'm looking at this documentation on "Image and file upload options".

First thing off the bat it says in describing the automatic_uploads option is:

Enable or disable automatic upload of images represented by data URLs or blob URIs. Such images get generated, for example, as a result of image manipulation through Image Tools plugin, or after image is drag-n-dropped onto the editor from the desktop.

This is exactly what I want - when an image is dragged and dropped onto the editor I want it to upload the image to my server. I read through the rest of the options and came up with this:

tinymce.init({
    automatic_uploads: true,
    images_reuse_filename: true,
    images_upload_credentials: true,
    images_upload_handler:async function (blob,success,failure) {
        console.log(blob)
    },
    // remainder of options here

For the moment I'm just trying to print a debug statement when the upload handler is called, so that I know I have gotten that far. But when I drag an image onto the editor, I get a pop-up which says:

Leave site?

Changes you made may not be saved.

[Cancel] [Leave]

If I say "Leave" it abandons the site and brings the image up in the browser, which is not what I want. If I say "Cancel" then it stays on the page, but my upload function is never called, and subsequent attempts to drag onto the page do nothing.

Why isn't this working? Is there some plug-in that I need to install which isn't mention on the documentation page?

Michael
  • 9,060
  • 14
  • 61
  • 123

1 Answers1

1

How a browser treats dragged/dropped images can differ across browsers. From where are you dragging the image? What browser and OS are you using?

In TinyMCE 5 the Insert/Edit Image dialog would have an Upload option (3rd link on the left) if you have image uploads setup correctly.

enter image description here

Do you see such an option? Can you drag/drop to that dialog via the Upload tab?

Michael Fromin
  • 13,131
  • 2
  • 20
  • 31
  • Ah yes, that works! I was just trying to drag and drop the image directly into the editor. – Michael Sep 05 '19 at 18:10
  • 1
    Is there a way to catch drops directly on the editor instead of having to bring up the insert image dialog every time? – Michael Sep 05 '19 at 18:11
  • Possibly but that dialog allows this to work consistently across all browsers so from a "what TinyMCE supports out of the box" perspective. If you wanted to try to catch all drag/drop actions on the iFrame that would be custom code. – Michael Fromin Sep 05 '19 at 18:48