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: stackoverflow.com/questions/24710503/… — Alexander Kuzmin
– Alexander Kuzmin, Commented Jan 1, 2016 at 6:50

Bimal Das · Accepted Answer · 2016-01-02 10:43:45Z

1

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;

edited Jan 2, 2016 at 10:43

answered Jan 1, 2016 at 8:51

Bimal Das

2,0125 gold badges33 silver badges55 bronze badges

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

1 Comment

Ajinkya Sawant Over a year ago

data is null value when i use var data = HttpContext.Current.Request.Form["surveyData"];

Ajinkya Sawant · Accepted Answer · 2016-01-01 15:04:41Z

0

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 }
                });

answered Jan 1, 2016 at 15:04

Ajinkya Sawant

1002 silver badges13 bronze badges

Collectives™ on Stack Overflow

Multipart/form-data form sending data with AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related