Angular multipart form data upload webapi 404

Question

I'm trying to upload a file from AngularJS to ASP.NET WebAPI. For some reason, it is being rejected by WebAPI with a 404 status code. Here's the code:

Angular JS:

function upload(file, assessmentId, progressCallback) {
    var formData = new FormData();
    formData.append('file', file, file.name);
    formData.append('assessmentId', assessmentId);

    // post the file
    return $http({
        data: formData,
        headers: { 'Content-Type': undefined },
        method: 'POST',
        url: _api('api/video/upload')
    });
}

Also tried:

function upload(file, assessmentId, progressCallback) {
    var formData = new FormData();
    formData.append('file', file, file.name);
    formData.append('assessmentId', assessmentId);

    return $http.post(_api('api/video/upload'), formData, {
        transformRequest: angular.identity,
        headers: { 'Content-Type': undefined }
    });
}

C# WebApi:

[HttpPost]
[Route("api/video/upload")]
public async Task<IHttpActionResult> Upload()
{
    if (!Request.Content.IsMimeMultipartContent("form-data"))
        return StatusCode(HttpStatusCode.UnsupportedMediaType);

    /* do stuff */

    return Ok(new { test = "ing" });
}

If I comment out formData.append('file', file, file.name); so only appending the assessmentId, WebApi accepts the request.

file is from the HTML file upload control: element[0].files[0]. I wonder if that's where the error is?

Another thing to note is in the Chrome Developer Tools Console, after the 404 POST error, there's a CORS error on the same request. I've seen this occur before when WebApi fails, but I don't think there is actually a CORS error because it works when I exclude the file from the request.

Update
The plot thickens. It works fine with small files (a few MB). If I upload a 27MB file, I get a 500 error stating "Maximum request length exceeded". Great! Getting somewhere. But if I upload a 56MB file, I get the 404 status code. What's going on here?

With the following config, the 27MB file works, but the 56MB file still returns 404.

<location path="api/video/upload">
    <system.web>
        <httpRuntime executionTimeout="86400" maxRequestLength="4194304" />
    </system.web>
</location>

@RohanKawade no, but I've used this same code elsewhere (with Angular Audio Recorder) and it works fine. — Paul Fleming
– Paul Fleming, Commented Jul 1, 2016 at 8:29
@RohanKawade However I'm using a directive derived from here to bind the input element. — Paul Fleming
– Paul Fleming, Commented Jul 1, 2016 at 8:31

Paul Fleming · Accepted Answer · 2016-07-01 08:39:56Z

Ok, with fresh eyes, I've reach the cause. There are yet more config settings to limit the request size in ASP.NET. The code in the OP is fine. This configuration is required (4GB limit):

<location path="api/video/upload">
    <system.web>
        <httpRuntime executionTimeout="86400" maxRequestLength="4194303" />
    </system.web>
    <system.webServer>
        <security>
            <requestFiltering>
                <requestLimits maxAllowedContentLength="4294967295" />
            </requestFiltering>
        </security>
    </system.webServer>
</location>

And for the sake of this answer being a full solution, here's the code again:

Angular JS Service Operation:

upload: function (file, assessmentId, progressCallback) {
    var formData = new FormData();
    formData.append('file', file, file.name);
    formData.append('assessmentId', assessmentId);

    // post the file
    return $http({
        data: formData,
        headers: { 'Content-Type': undefined },
        method: 'POST',
        url: _api('api/video/upload')
    });
}

WebApi Action:

[HttpPost]
[Route("api/video/upload")]
public async Task<IHttpActionResult> Upload()
{
    if (!Request.Content.IsMimeMultipartContent("form-data"))
        return StatusCode(HttpStatusCode.UnsupportedMediaType);

    /* do stuff */

    return Ok(new { test = "ing" });
}

WebAPI web.config:

<location path="api/video/upload">
    <system.web>
        <httpRuntime executionTimeout="86400" maxRequestLength="4194303" />
    </system.web>
    <system.webServer>
        <security>
            <requestFiltering>
                <requestLimits maxAllowedContentLength="4294967295" />
            </requestFiltering>
        </security>
    </system.webServer>
</location>

Collectives™ on Stack Overflow

Angular multipart form data upload webapi 404

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related