ASP.NET MVC Controller causing page reload when uploading a Blob

Question

When I send a Blob to a controller via ajax, saving the file in the controller causes a page refresh. If I don't save the file, it doesn't refresh. My code:

Update I spun up a new blank ASP.NET MVC 5 app, copied over the ajax code, and it still refreshes the page if I save file in controller.

controller:

public class PicUploadTestsController : Controller
{
    public ActionResult StackOverflowSample()
    {
        return View();
    }

    [HttpPost]
    public string UploadPic()
    {
        var length = Request.ContentLength;
        var bytes = new byte[length];
        Request.InputStream.Read(bytes, 0, length);

        WebImage webImage = new WebImage(bytes);
        var path = Path.Combine(Globals_mt.Instance.ServerRootPath, "Areas/SampleTests/Img/test.jpg");

        //If I comment out the save, no reload happens
        webImage.Save(path);

        return "/Areas/SampleTests/Img/test.jpg";
    }
}

typescript:

$(function () {

$('#blob-upload').change((e) => {

    var input = <HTMLInputElement>e.target;
    var file = input.files[0];

    getBlob(file, (blob: Blob) => {
        var xhr = new XMLHttpRequest();
        xhr.open('post', '/SampleTests/PicUploadTests/UploadPic', true);
        xhr.send(blob);
    });
});


function getBlob(file: File, callback: Function) {
    var filereader = new FileReader();

    filereader.onloadend = () => {
        var imageEl = new Image();
        imageEl.onload = () => {
            var width = imageEl.width;
            var height = imageEl.height;
            var canvasEl: HTMLCanvasElement = document.createElement('canvas');
            var context: CanvasRenderingContext2D = canvasEl.getContext('2d');
            canvasEl.width = width;
            canvasEl.height = height;
            context.drawImage(imageEl, 0, 0, width, height);

            var blob: Blob = dataUrlToBlob(canvasEl.toDataURL(file.type));
            callback(blob);
        };
        var result = filereader.result;
        imageEl.src = result;
    };

    filereader.readAsDataURL(file);
}

function dataUrlToBlob(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = parts[1];

        return new Blob([raw], { type: contentType });
    }

    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], { type: contentType });
}

});

razor view:

@using (Html.BeginForm())
{
    <label>ajax blob to FileReceiver()</label>
    <input type="file" id="blob-upload" />
}

This happens no matter what I've tried, including uploading the file directly, saving either the file or Blob using file.SaveAs(), wrapping the blob in FormData(), moving the save operation out of the controller to a class library, not having a form in the view, i.e. just having an <input type="file" /> directly on the page, etc etc.

I'm using ASP.NET MVC 5, Visual Studio 2015

Am I missing something simple here? I had this working properly once upon a time.

Note: The reason I'm uploading a blob is because in the real code, I'm sizing the image down to a thumbnail so that I don't have to upload a 6mb file to create a 75 x proportionalHeight image.

Answer 1

Turns out the issue was with Mads Kristenson's Browser Link extension for Visual Studio, I disabled that and the issue was resolved