CODEWITHSUNDEEP
javascriptjqueryajaxvisual-studiosummernote
Ben
Ben

Reputation: 63

Summernote image upload through AJAX causes page refresh

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.

Upvotes: 1

Views: 792

Answers (2)

Devel
Devel

Reputation: 31

I get around this by submitting to a hidden <iframe>, I also do the same with submitting the form that I embed Summernote into. Then when the form is submitted, or saved in the case of how user's perceive editing content within the editor, I basically block out the editor to indicate things are busy and to make sure they don't add things without saving, then on the server side when data is returned to the iframe I just use a window.top.window.$('element blocking summernote') type of call to remove or indicate that saving is complete.

Upvotes: 0

Ben
Ben

Reputation: 63

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

Upvotes: 2

Related Questions