Ya Wang Ya Wang - 13 days ago 6
AngularJS Question

MVC5 404 Error On File & Input Post Angularjs

Trying to Post a file and some data to MVC 5 backend.

Issue is it's not mapping properly so it's returning a 404. The Http post request is being sent over as a multipart/form-data content type.

Here is the Http post from angular service

requestInputHeat: function (qty, date, camp, note, file1) {
return $http({
method: 'POST',
url: '/log/heat/request',
headers: {
'Content-Type': 'multipart/form-data'
},
data: {
Quantity : qty,
RequestDate: date,
CampaignDetail: camp,
Notes: note,
File: file1
},
transformRequest: function (data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function (value, key) {
formData.append(key, value);
});

var headers = headersGetter();
delete headers['Content-Type'];

return formData;
}
})
}


Here is the controller MVC5 backend I have trying to receive this request (using mvcmapping atrributes)

[HttpPost]
[Route("log/heat/request")]
public ActionResult RequestPOHeat(string Quantity, string RequestDate, string CampaignDetail, string Notes, HttpPostedFileBase File)
{
......
}


enter image description here

Answer

Please try following

In angularJs

function requestInputHeat(qty, date, camp, note, file1) {
            var request = {
                method: 'POST',
       //public ActionResult RequestPOHeat(string Quantity, string RequestDate, string CampaignDetail, string Notes) 
       //your Controller Action RequestPOHeat requires 4 query strings which was previously not send in your code which I had passed below. This was giving 404 error.
                url: '/log/heat/request?Quantity=' + qty.toString() + '&RequestDate=' + date.toString() + '&CampaignDetail=' + camp.toString() + '&Notes' + note.toString(),// I don't know the datatype so had converted them to string.Please change them to corresponding type once it's working. Also don't forget to map type with RequestPOHeat method parameter of controller.
                data: { file: file1 },
                headers: {
                //IMPORTANT!!! You might think this should be set to 'multipart/form-data' 
        // but this is not true because when we are sending up files the request 
        // needs to include a 'boundary' parameter which identifies the boundary 
        // name between parts in this multi-part request and setting the Content-type 
        // manually will not set this boundary parameter. For whatever reason, 
        // setting the Content-type to 'false' will force the request to automatically
        // populate the headers properly including the boundary parameter.
                    'Content-Type': undefined
                },
                transformRequest: function (data) {
                    var formData = new FormData();
                    angular.forEach(data, function (value, key) {
                        formData.append(key, value);
                    });

                    return formData;
                },
            };


            return $http(request).success(function (result) {
                return result.data;
            }).error(function () {

            });
        }

In MVC Controller

[HttpPost]
[Route("log/heat/request")]
public ActionResult RequestPOHeat(string Quantity, string RequestDate, string CampaignDetail, string Notes)
{
   var file = HttpContext.Current.Request.Files.Count > 0 ? HttpContext.Current.Request.Files(0) : null;
   if (file != null && file.ContentLength > 0) {
      //If file is posted you will get here..
   }
 ......
}

Hint: What is bounty Parameter? The boundary parameter is set to a number of hyphens plus a random string at the end, but you can set it to anything at all. The problem is, if the boundary string shows up in the request data, it will be treated as a boundary.

Comments