Froala Image Loading Fails After Uploading
I Am Trying to Upload Image to the Server in Froala Editor. However It Fails to Load Uploaded Image. the Following Error Is Returned from the Editor: 404 ()...
I am trying to upload image to the server in Froala editor. However it fails to load uploaded image. The following error is returned from the editor:
404 ()
{code: 1, message: "Image cannot be loaded from the passed link."}
and the response is undefined -> response: undefined
However, this is a correct link and I am able to open the image in my browser when I click on it.
I have the following code for froala editor:
$('.text-editor').froalaEditor({
/*theme: 'gray',
zIndex: 2001,*/
/*theme: 'dark',
zIndex: 2003,*/
theme: 'custom',
charCounterCount: false,
toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', '|',
'fontFamily', 'fontSize',
'color', '|', 'align', 'outdent', 'indent', 'insertLink',
'insertImage', 'embedly',
'|', 'emoticons ', 'specialCharacters', 'insertHR', 'selectAll', '|', 'spellChecker', 'undo', 'redo'],
quickInsertTags: [],
heightMin: 500,
imageUploadURL: '/image/upload',
imageMaxSize: 5 * 1024 * 1024,
imageUploadMethod: 'POST',
// Set the load images request URL.
imageManagerLoadURL: "",
// Set the load images request type.
imageManagerLoadMethod: "GET",
/*imageUploadParams: {id: 'my_editor'}*/
})
.on('froalaEditor.contentChanged', function (e, editor) {
console.log("Page content changed");
var pageContent = $(this).find('.fr-view').html();
var id = $('#pageId').text();
var pageJson = {"id": id, "pageContent": pageContent};
console.log(pageJson);
$.ajax({
type: 'POST',
url: '/page/edit',
contentType: 'application/json',
data: JSON.stringify(pageJson),
dataType: 'json'
}).done (function(data) {
//console.log("page " + data.id + " was updated");
}).fail (function(err) {
console.error(err);
});
})
.on('froalaEditor.image.error', function (e, editor, error, response) {
// Bad link.
if (error.code == 1) {
console.log(error);
console.log("response: " + response);
}
// No link in upload response.
else if (error.code == 2) {
console.log(error);
}
// Error during image upload.
else if (error.code == 3) {
console.log(error);
}
// Parsing response failed.
else if (error.code == 4) {
console.log(error);
console.log("response: " + response);
}
// Image too text-large.
else if (error.code == 5) {
console.log(error);
}
// Invalid image type.
else if (error.code == 6) {
console.log(error);
}
// Image can be uploaded only to same domain in IE 8 and IE 9.
else if (error.code == 7) {
console.log(error);
}
// Response contains the original server response to the request if available.
});
For the server side I use Java Spring framework and the following code to upload the image:
public ImageLink upload(MultipartFile file, String baseUrl) {
String linkName = null;
String type = file.getContentType();
type = type.substring(type.lastIndexOf("/") + 1);
// Generate random name.
String extension = type;
extension = (extension != null && extension != "") ? "." + extension : extension;
String name = UUID.randomUUID().toString() + extension;
try {
file.transferTo(resourceLoader.getResource("/create-page/images/" + name).getFile());
} catch (Exception e) {
e.printStackTrace();
}
logger.info(baseUrl);
linkName = "images/" + name;
ImageLink link = new ImageLink();
link.setLink(linkName);
logger.info(link.toString());
return link;
}
So, the response body is like this:
{
"link": "images/97861510-5ca9-4d0d-968c-214ca771832a.png"
}
Froala seems to add to it, so I am returning relative path. I tried different variants, like returning the whole address but it is still not working.
Please point to me what am I doing wrong. Thank you!
1 Answer
It seems like the server wasn't able to upload the image on time, so the froala was making the request while the image was not ready yet. I added Thread.sleep(5000); to the controller before send the response to the client. Not sure if it is a good solution but it solved my issue.