Using TinyMCE 4 and the paste plugin with a custom image upload handler (based on documentation sample), I've got the upload working just fine. However, when the upload fails, the image is still added to the content. The sample indicates calling the failure method for errors but that doesn't remove the image.
I've tried adding a paste_postprocess callback to filter the content, but at that point there is no difference in the content between a successfully uploaded image and a failed one. They both appear in the content like:
<div style="display:none"><img src="data:image/jpeg;base64, datahere" /></div>
The end result in the content is actually different. A successful upload has an image source like:
<img src="http://website/uploads/mceclip11.jpg" />
Whereas a failed upload looks like:
<img src="blob:http://website/dd3bdcda-b7b1-40fe-9aeb-4214a86a92a9">
To try this out, I created a TinyMCE Fiddle here.
Any ideas on how to remove the failed upload image from the content before it's displayed to the user?
For anyone who might try something similar, I figured out a way to deal with this.
After calling the failure method as shown in the examples, I now call a method to remove the failed image before it shows up in the editor.
The function looks something like this:
function removeFailedUpload() {
var editor = tinymce.EditorManager.get('editorId');
var $html = $('<div />',{html:editor.getContent()});
$html.find('img[src^="data:"]').remove();
editor.setContent($html.html());
}