I was using Froala 3.2.1 and when I copied images from sites whose src property starts with "blob:https://example.com/image-id" it pastes the image correctly, and starts uploading the content to my server.
However, in the latest versions (4.0.12), when I copy this type of image (right click > copy image) and paste it into Froala, it simply adds the broken image, without trying to upload. Another thing I noticed is that now Chrome displays an error message, which if I go back to 3.2.1 it doesn't occur.
Below is the HTML generated by Froala when pasting the image:
<img data-fr-image-pasted="true" src="blob:https://example.com/id-id-id-id-id" style="width: 300px; display: block; float: none; vertical-align: top; margin: 5px auto; text-align: center;">
Even the code they suggest to convert a pasted image to base64 is not triggered by this type of content.
This is the error that is displayed by Chrome:
Not allowed to load local resource: blob:https://example.com/id-id-id-id-id
I use the code below to generate the editor.
var editor = new FroalaEditor('div#froala-editor', {
imageUploadURL: 'https:/example.com/uploadImage', /*Use to test upload image to server*/
imageUploadRemoteUrls: true, /*Use to test upload image to server*/
events: {
"image.beforeUpload": function (files) {
var editor = this;
if (files.length) {
// Create a File Reader.
var reader = new FileReader();
// Set the reader to insert images when they are loaded.
reader.onload = function (e) {
var result = e.target.result;
editor.image.insert(result, null, null, editor.image.get());
};
// Read image as base64.
reader.readAsDataURL(files[0]);
}
editor.popups.hideAll();
// Stop default upload chain.
return false;
}
}
});
What can be done to fix this behavior?