Summernote image upload through AJAX causes page refresh

Question

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

            }

        });

Image Upload:

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;



    }

Now, the image uploading works and I'm getting the correct path but for some reason the AJAX call causes a page refresh after it executes.
I've tried adding the "return false" but it didn't work and I'm unable to use preventDefault since I'm not getting the event from summernote.

Does anyone have any idea why AJAX is causing the refresh?
I'm suspecting the culprit is the "FormData" object but I was unable to find any proof or a way to prevent the refresh even after extensive Google research.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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 -_-

Summernote image upload through AJAX causes page refresh

Sign up