Failed image upload still showing in editor

[ouraios]

What is the current behavior? Describe the bug
When i drag & drop an image and check for its size before start to uploading it, if the failure upload callback is called, the image still stay in editor and is not removed.

You can use this image to test the behavior on the fiddle : https://ps.w.org/tinymce-advanced/assets/screenshot-1.png?rev=2011513

Fiddle : http://fiddle.tinymce.com/5Sgaab

What is the expected behavior?

Image is removed on upload failure callback

Which versions of TinyMCE, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE?

TinyMCE Version : tinymce5-cloud-stable
Browser : Chrome 77

[lnewson]

@ouraios sorry for the delay in answering here, but it looks like you are trying to implement an image upload limit?

If so the image upload handler is probably not a good solution for that and probably needs to be done via a content filter or proper support as per #4897. The reason being the image upload function is just meant to take images displayed within the editor and then save them via a backend service, however the images will already be added/displayed in the editor by the time the upload handler gets called, so having them disappear on a failure wouldn't be a good user experience.

[ouraios]

Hello @lnewson the problem is it wont work if the server refused the uploaded image too, the image will still appear in the textarea of tinymce and that's not really possible.

For me the thing missing is letting the drag&drop feature to not integrate the image in the textarea on drap&drop if the upload callback refuse the image for whatever reason.

[deepdsavani]

I faced a similar issue. @ouraios. Calling the success with empty string removed the image from the editor. I don't know whether this was expected or not but it worked for me to remove the image from the editor due to backend failure.

[ouraios]

Yes @deepdsavani but its very bad fo force the user to manually delete the image, it can let him believe that the image was uploaded successfully if the image is still in the editor. From a UX pov its really bad.

[ouraios]

@deepdsavani I tried your solution but it's not working well neither ... :/
i tried to add the success callback like that :

if( valid_extensions.indexOf(ext) == -1){
    failure("Invalid extension");
    success('');
    return;
}
if(blobInfoDetail.size && blobInfoDetail.size > 100000){
    failure('Max accepted image size is 100ko');
    success('');
    return;
}

Result : The image still stay in the editor.

And like that :

if( valid_extensions.indexOf(ext) == -1){
    success('');
    return;
}
if(blobInfoDetail.size && blobInfoDetail.size > 100000){
    success('');
    return;
}

There's still an image trying to be resolved by tinymce :

Plus i lose the warning message about not being able to upload, so definitly not a good solution in my opinion :/

[lnewson]

Just as an update to this, we've had this requested elsewhere as well. As such we're going to look into the ability to use a flag in the failure callback to have the editor remove the image. We don't have a timeframe when the feature will be implemented though.

[ouraios]

That's great news ! Cant wait to see this option to be available !

[livthomas]

I was dealing with the same issue and I found a simple workaround:

tinymce.activeEditor.undoManager.undo();

[guomsh]

TiniyMCE5 you can set UploadFailureOptions to remove the image，like failure("error!", {remove:true});

[lnewson]

We missed updating this when it was released sorry all, but yes this feature was added in TinyMCE 5.5.0. As @guomsh mentioned above you can now pass an object to the failure callback to tell TinyMCE to remove the image. See images_upload_handler docs and TinyMCE 5.5 release notes for more details.