XMLHttpRequest in ASP NET not working since updating from Website to Web Application

Question

this problem is bothering me now after at least a day fiddling about I have some ASP NET code and javascript code running perfectly in one of my websites. I duplicated my project into a web application (to get it up to date for various reasons) and there's one bit that refuses to work

The page uploads an image blob to itself using an XMLHttpRequest. This is the server code (page load event):

Dim files As HttpFileCollection = Request.Files
If files.Count > 0 Then
  For a = 0 To files.Count - 1
    Dim fil As HttpPostedFile = files(a)
    Dim s As String = fil.FileName
    If s = String.Empty Then
      GoTo skip
    End If
    Dim uq As String = UniqueIDGen.GetUniqueKey
    Dim SaveLocation As String = Convert.ToString(Server.MapPath("~/Crop/Temp") + "\") & uq & "_" & s & ".jpg"
    'save the posted image blob as a file
    fil.SaveAs(SaveLocation)
    'save the paths for the application to use later
    Session("UploadedImageURL") = Path.Combine("~/Crop/temp/" & uq & "_" & s & ".jpg")
  Next
End If

And in the page, this is the bit which uploads the image:

function uploadFile() {
    var fd = new FormData();
    var $selector = $("#image");
    var w = document.getElementById('hidPreferredWidth').value;
    var canvas = $($selector).cropper('getCroppedCanvas', { width: w, height: 100 });
    var image = canvas.toDataURL('image/jpeg');
    var blob = dataURItoBlob(image);
    fd.append("toDataData", blob);

    var xhr = new XMLHttpRequest();
    xhr.upload.addEventListener("progress", uploadProgress, false);
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.addEventListener("abort", uploadCanceled, false);
    xhr.open("POST", "GetImage.aspx", false);
    xhr.setRequestHeader("Accept", "*/*")
    xhr.setRequestHeader("Cache-Control", "no-cache")
    xhr.setRequestHeader("MyHeader","TestValue")
    xhr.send(fd);
}

So, all works perfectly in the website, but not in the web application. Both being run in Visual Studio 2015

I have already had an issue with URLs when moving the website, I'm wondering if this could be the issue?

This is the http headers on the (working) website:

Cache-Control=no-cache
Connection=Keep-Alive
Content-Length=14237
Content-Type=multipart/form-data; boundary=---------------------------7e1153e5f061e
Accept=*/*
Accept-Encoding=gzip, deflate
Accept-Language=en-GB,en;q=0.5
Cookie=_ga=GA1.1.1076994128.1486478471; cookie_assistant_enable_cookies=true; .AspNet.ApplicationCookie=_Uo6V6Ah4x-e4J-FrKp1JNwmESjtmpW-sf2eY22_TugxCR0OyCCoAsh5Iv5aB1EUtjWXvD7O4E9tbbFPQ7mtQK8hXMFc6wzdSUWccxMKig5Wm9dgnSDoB3ERjEk6TlD2hakr56qo3o-2Zv5S2VCRWLKRlxcJnYl4c96iTDeet-MpWMgyO6GRbSUzC7Thgvd4uoNPjBOOYArPIOElTI0tqIu4iL2_Y4eI6yR7hK9DQD0VRtRqaGndB0C4jufhT9_KkNQVltLPzb-zZzpdIacvBjSvthqC0i-p2zXve1ia5vyGnS3rOJaWe6edqAwjJ3fgzdm44AAYHbwQcShZJY7NLKbYbdQLkqg-OtMD7HdgWTgF_AjiapwoAITKSNEy7L2oK5EPZGkI0nnvyWxjvNKbSXMNkDqkyGsQ5uoVZ62DYxtBmSkx8AF3ncWQuaNdI5SG_I5nlVhZMdRfVL1SH10_7_HK8pEnFVK-TfbqI1FfpIX6QcNOEfUA2aRUiMDxnSo1; _gat=1; ASP.NET_SessionId=q2hdzqacnygw5crvhyypxcxb
Host=localhost:51872
Referer=http://localhost:51872/Crop/GetImage.aspx
User-Agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393
MyHeader=JustTesting

And this is the headers in the (not working) ASP NET Application:

Cache-Control=no-cache
Connection=Keep-Alive
Content-Type=multipart/form-data; boundary=---------------------------7e114b5330aea
Accept=*/*
Accept-Encoding=gzip, deflate
Accept-Language=en-GB,en;q=0.5
Cookie=_ga=GA1.1.1076994128.1486478471; cookie_assistant_enable_cookies=true; .AspNet.ApplicationCookie=_Uo6V6Ah4x-e4J-FrKp1JNwmESjtmpW-sf2eY22_TugxCR0OyCCoAsh5Iv5aB1EUtjWXvD7O4E9tbbFPQ7mtQK8hXMFc6wzdSUWccxMKig5Wm9dgnSDoB3ERjEk6TlD2hakr56qo3o-2Zv5S2VCRWLKRlxcJnYl4c96iTDeet-MpWMgyO6GRbSUzC7Thgvd4uoNPjBOOYArPIOElTI0tqIu4iL2_Y4eI6yR7hK9DQD0VRtRqaGndB0C4jufhT9_KkNQVltLPzb-zZzpdIacvBjSvthqC0i-p2zXve1ia5vyGnS3rOJaWe6edqAwjJ3fgzdm44AAYHbwQcShZJY7NLKbYbdQLkqg-OtMD7HdgWTgF_AjiapwoAITKSNEy7L2oK5EPZGkI0nnvyWxjvNKbSXMNkDqkyGsQ5uoVZ62DYxtBmSkx8AF3ncWQuaNdI5SG_I5nlVhZMdRfVL1SH10_7_HK8pEnFVK-TfbqI1FfpIX6QcNOEfUA2aRUiMDxnSo1; _gat=1; ASP.NET_SessionId=2lzpivbvow0a0vzpsyags2sr
Host=localhost:57291
Referer=http://localhost:57291/crop/GetImage
User-Agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.79 Safari/537.36 Edge/14.14393
MyHeader=TestValue

There is a different in the referer value, could this be a problem?

In any case, when I run this on the web application. there is no file passed to the server?? Yet in the website - you can see in the header that there is a content-length, this is the file which does work

Any help massively appreciated!

Answer 1

Okay, fixed it. My call was to GetImage.aspx from the javascript. Apparently this is bad and resulted in a GET call in newer versions of .NET (always worked before)

Solution: Create a folder /GetImageHelper and add a default document (Default.aspx) - place the server side code into the default document

From the web page javascript, call the http like this:

xhr.open("POST", "GetImageHelper/", false);

Wish I had time to figure out quite why this is so, but I have deadlines that are much nearer now :-)