TinyMCE Drag and Drop image upload issues

Question

I've used TinyMCE for a while, but am now wanting to implement drag-and-drop image upload functionality. (ie where you can drag an image from your local computer into the text editor, resize & reposition it etc, then upload it to the server) I was going to purchase Redactor for this feature, but then I noticed TinyMCE has the paste_data_images option allowing images to be dragged/pasted directly into the editor. This seems to converts it to inline base64 encoded data.

I suspect and have read, that in theory it might be possible to have this value submitted to the server, extract the base64 uris from the Dom, write them to a file, replace the SRC with the path to the newly created file, then submit the text to the database. Has anyone achieved this?

From my initial exploration I've found the issues may be:

• Huge images (~100mb) could potentially be pasted into the textbox which could cause problems.
• Internet Explorer 11 and Edge browsers both don't seem to allow dragging of images into the textbox at all.

Has anyone managed to get this working seemlessly?

I have since double checked Redactor and noticed that it also doesn't work with IE and Edge either.

Answer 1

TinyMCE 4.2+ actually has its own built in process for handling the upload of images that you place in the editor:

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

The basic process is that TinyMCE will create a separate HTTP POST for each image that you insert into the editor. It will send that image to a URL of your choosing (via HTTP POST) based on the setting of the images_upload_url option in your init.

The image handler at the URL referenced in the images_upload_url (which you have to create) has to do whatever needs to be done to "store" the image in your application. That could mean something like:

• Store the item in a folder on your web server
• Store the item in a database
• Store the item in an asset management system

...regardless of where you choose to store the image your image handler needs to return a single line of JSON telling TinyMCE the new location of the image. As referenced in the TinyMCE documentation this might look like:

{ location : '/uploaded/image/path/image.png' }

TinyMCE will then update the image's src attribute to the value you return. If you use the images_upload_base_path setting in the init that will be prepended to the returned location.

The net here is that TinyMCE knows when an embedded image exists in your content but it can't possibly know what to do with that image in the context of your application so that job (the "image handler") is something you must create.

As for the issues you reference...

• If a browser does not allow the drag/drop sequence you could look at using a file manager like MoxieManager or elFinder etc. They allow you to upload the image via a UI and have the uploaded image appear in your content in one step.
• Image size is always an issue. You could manage this on the server in the image upload handler and return an error if the image is "too large". You could also write your own image handler function and stop the upload altogether if the image is too large.