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.

MikeT · Accepted Answer · 2017-12-16 21:42:22Z

3

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

answered Dec 16, 2017 at 21:42

MikeT

2,6021 gold badge30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Youp Bernoulli Over a year ago

Thanx a lot. I had a similar issue with copying some files causing the initiating POST action to be cancelled and firing a refresh of the initial GET request :/ After disabling Browser Extension Link the issue had gone fortunately.

Fran · Accepted Answer · 2016-07-17 20:47:19Z

0

You need to return false from your JavaScript so that the page doesn't refresh.

$('#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);
    });
return false;
});

edited Jul 17, 2016 at 20:47

answered Jul 17, 2016 at 20:37

Fran

6,5801 gold badge26 silver badges37 bronze badges

2 Comments

Fran Over a year ago

It's such a small change, but i added an explanation per your suggestion

MikeT Over a year ago

@Fran Doesn't work, page still reloads. I tried adding return false; everywhere I could think, nothing worked

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related