Jquery Ajax Upload with progress is reloading page

Question

I have strange stuf with a Jquery form submit.

After the upload completed, the page is reloading even in the server has not finished to process.

The server just return a json succes status, so It's not on server side.

Here"s the code:

$form.on('submit', function (e) {

        console.log('Submit form ' + fileNumber);
        if ($form.hasClass('is-uploading')) return false;

        $form.addClass('is-uploading').removeClass('is-error');

        if (isAdvancedUpload) {
            e.preventDefault();
            e.stopPropagation();
            var ajaxData = new FormData($form.get(0));

            var $input = $form.find('input[type="file"]');


            if (fileToUpload) { ajaxData.append($input.attr('name'), fileToUpload); }
            console.log('FileTo Upload: ' + fileToUpload);

            $.ajax({
                url: $form.attr('action'),
                type: $form.attr('method'),
                data: ajaxData,
                dataType: 'json',
                xhr: function () {
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', progress, false);
                    }
                    return myXhr;
                },
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function (xhr,settings) {

                },
                complete: function (xhr, status) {
                    xhr.
                    //$form.removeClass('is-uploading');
                    //fileNumber++;
                    //fileToUpload = droppedFiles[fileNumber];
                    //if (fileToUpload) { $form.submit(); }
                },
                success: function (data,status,xhr) {
                    //$form.addClass(data.success === true ? 'is-success' : 'is-error');
                    //if (!data.success) $errorMsg.text(data.error);
                },
                error: function (xhr,status,error) {
                }
            });

        } else {
            // ajax for legacy browsers
        }
    });

The issue is here:

   xhr: function () {
                    var myXhr = $.ajaxSettings.xhr();
                    if (myXhr.upload) {
                        myXhr.upload.addEventListener('progress', progress, false);
                    }
                    return myXhr;

If I remove return myXhr The page is not reloading after upload, but I have no progress report.

I don't know what to do to prevent reloading.

Thanks.

Answer 1

I found out the issue.

There was no worry with the xhr object.

The issue was coming from Visual Studio Browser Link.

After shuting it down, everything worked perfectly.

Browser link, for an obvious reason was fire a reload of the page.

Will see with the ASP.NET Core team