Multipart/form-data form sending data with AngularJS

Question

I need to post form data as below to URL which is a webapi and the method is post

var surveyData = {
            Name: xyz,
            SetReminder: 'false',
            NoOfReminder: '0',
            StartDate: 'xyz',
            EndDate: 'xyz',
            Language: 'eng-us',
            Duration: '1',
            ApplicationName: 'xyz',
            SurveyTypeName: 'zxy'
        };

i have written the below code which call the post method of wbeapi but the function is able to send the data but the post method is not able to read the data that is send using the angular js.

function(surveyData) {
               return $http.post(URL , surveyData,{
                    headers: { 'Content-Type': 'multipart/form-data' }
                });

I think the first answer on this question holds the answer you seek: https://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-in-angularjs — Alexander Kuzmin, Jan 01 '16 at 06:50

Bimal Das · Answer 1 · 2016-01-02T10:43:45.953

Use :

var data = HttpContext.Current.Request.Form["surveyData"];

To recieve the json data from your multipart form.

If your multipart form contail files, then to get these files use :

System.Web.HttpFileCollection postedfiles = System.Web.HttpContext.Current.Request.Files;

Also keep in mind that do not use any parameter in your controller action method.

Make sure you import these namespaces:

using System.Net.Http;
using System.Web;
using System.Web.Http;

EDIT :

modify your javascript code.

var data = new FormData();
data.append("surveyData", angular.toJson(surveyData));

If you want to add images/other, you can add those using the code below.

//data.append("uploadedFile", $scope.files[0]);

So your code will be :

function(surveyData) {
               return $http.post(URL , data,{
                    headers: { 'Content-Type': 'multipart/form-data' }
                });

Now you will be able to receive the json data using

var data = HttpContext.Current.Request.Form["surveyData"];

and images/otherfiles(If you have) using

System.Web.HttpFileCollection postedfiles = System.Web.HttpContext.Current.Request.Files;

data is null value when i use var data = HttpContext.Current.Request.Form["surveyData"]; — Ajinkya Sawant, Jan 01 '16 at 10:05

score 0 · Accepted Answer · answered Jan 01 '16 at 15:04

if web api is Multipart/form-data then you need to create key value pair in the below form so that multi part form data will be created.

var objFormData = new FormData();
                for (var key in surveyData)
                    objFormData.append(key, surveyData[key]);

then you need to send the created multi part form data using the below code:

 return $http.post(URL, objFormData, {
                    transformRequest: angular.identity,
                    headers: { 'Content-Type': undefined }
                });

Multipart/form-data form sending data with AngularJS

2 Answers2