I'm trying to perform image uploads from summernote plugin to the server through AJAX and ASP.NET MVC.
After inspecting several examples I was able to create the following JS code:
Init:
$('#contentEditor').summernote({
height: 520, // set editor height
minHeight: 520, // set minimum height of editor
maxHeight: 520, // set maximum height of editor
callbacks: {
onImageUpload: onImageUpload
}
});
function onImageUpload(files) {
var data = new FormData();
data.append("articleId", @(Model.Id));
data.append("langId", @(Model.LanguageCode));
for (var i = 0; i < files.length; i++) {
data.append("files[" + i + "]", files[i]);
}
$.ajax({
data: data,
type: "POST",
url: "@(Url.Action("UploadArticleImage"))",
cache: false,
contentType: false,
processData: false,
success: function (d) {
if (!d.result) {
// TODO: Show error
} else {
for (var i = 0; i < d.data.length; i++) {
$('#contentEditor').summernote('insertImage', d.data[i]);
}
}
}
});
return false;
}
So, after 2 days of researching every corner of google it was a guess that solved it... Apparently, the reason my site kept refreshing on file upload (And only on file upload!) through AJAX was because of Visual Studio "Browser Link"!!! The moment I shut it down the issue was resolved! It appears this happened because when I'm uploading a picture the folder structure changes and it causes the browser link to call a refresh.
It's a good tool but it seems it can cause some unexpected issues -_-