Post JSON data And Files In Same Request With AngularJS And Web API

Jignesh Trivedi

Web API AngularJSAngularJS File Uploadingfiles in Same RequestPost JSON data

36 Comments

Join the conversation! Your thoughts help the community grow.

Imad Siddiqui6y ago
Can we try the same C# code without a path to upload the file? I don't want to upload the path, I only want to read the file and JSON data and push it into the DB.
- Harsh Tukadiya5y ago
  I don't know about that but, what I did is I delete that file in the last of my code string[] filePaths = Directory.GetFiles(HttpContext.Current.Server.MapPath("~/Content/files/"), "Body*", SearchOption.TopDirectoryOnly); foreach (string filePath in filePaths) { File.Delete(filePath); }
Anubhav Mishra6y ago
I followed the above steps apart from the WEB API part. The problem is scope.$emit is emitting the number of event(selectedFile) correctly as per the length of files however, $scope.$on is catching this event 3 times for each file. I am unable to understand why. Can you help me with it?
Abhishek Gupta7y ago
Nice article. for Angular JS 1.6.4 compatible code: $scope.submiCustomerDetails = function () { var jsonData = { firstName: $scope.firstName, middleName : $scope.middleName, lastName : $scope.lastName, email : $scope.email, comments : $scope.comments, files : $scope.files }; var url = "<your service url>>"; var config = { headers : { 'Content-Type': undefined }, transformRequest: function (data) { var formData = new FormData(); formData.append("model", angular.toJson(data.model)); for (var i = 0; i < data.files.length; i++) { formData.append("file" + i, data.files[i]); } return formData; }, data: { model: $scope.jsonData, files: $scope.files } }; $http.post(url,jsonData,config) .then( function(response) { $log.log('success'); }, function error(response) { $log.log('error'); }); };
Punit Singhi7y ago
Nice article, but you are using server.mappath, what happens if server are located different location so physical location won't match... wouldn't it created issue?
- Jignesh Trivedi7y ago
  This is fit in my example that why I am using. But you can any path to save, it may be shared or on ftp or anything....
biswaranjan das7y ago
Files are created with encrypted name without extension in the concern folder like BodyPart_65f65fde-bf77-4064-a3d3-d42a2cfabf40 , BodyPart_c28661a8-250f-4301-b07b-3027163dc3f9
muqofa rida7y ago
Thank you it`s help me
anoop gupta8y ago
File Not get when Is ajax hit to API. Can you please give me your contact number
anoop gupta8y ago
Why content type undefined
anoop gupta8y ago
BAKWAS Article always go to error
- Jignesh Trivedi8y ago
  Hi Anoop, what is problem with article?
anoop gupta8y ago
File not get in API
- Jignesh Trivedi8y ago
  Are you getting any error?
Viknaraj Manogararajah8y ago
nice article thank you for sharing....
revathi sharmi8y ago
Need to return some data with success on this. how i can do that?
- Jignesh Trivedi8y ago
  Here Success string it self return the data. instead of you can pass object with correct content type.
- Jignesh Trivedi8y ago
  Example var response = new { Name = "Jignesh", Message="Success" }; var contentType = Request.Content.Headers.ContentType; return Request.CreateResponse(HttpStatusCode.OK, response, contentType);
revathi sharmi8y ago
Always its going to error section.
- Jignesh Trivedi8y ago
  Are you get all file @ server side? can you please provide detail error
MD Islam8y ago
Hi Jignesh Trivedi I am getting 404 error saying like POST http://localhost:52224/PostFileWithData 404 (Not Found) at console
- Jignesh Trivedi8y ago
  Can you please check whether your webapi working correctly?
Sabab Zulfiker8y ago
How can I extract the attributes like name, comments from result.FormData["jsonData"] , so that I can store them into database. And what is the required operation for uploading the files into database??
- patrick simalango8y ago
  Is there anyone who can help to answer this question? I have the same problem.
anubha agrawal9y ago
Hi Jignesh, is it possible to post json values to web services not web api controller?
Manveer Singh10y ago
Hi Jignesh,can you please share the code for as in case of different files with data as Fields, 1: Employee Name, 2. Photo(Image), 3. Signature(Image).
- Jignesh Trivedi10y ago
  Hi Manveer, Code remain same for all type of files and just Json posted data change. are you facing any issue to customize code as per requirement?
Pradeep Sahoo10y ago
Nice . Thanks for sharing
Vivek Kumar10y ago
Good one
Kuppurasu Nagaraj10y ago
Nice Sharing..
Debasis Saha10y ago
Nice One..
Gowtham K10y ago
Good One, Thanks for sharing
Rahul Kumar Saxena10y ago
Good one
Vignesh Mani10y ago
Nice one
Shakti Singh Dulawat10y ago
Thanks for this article, just want to know when you pass two request from single event does it slow down performance of application ?
- Jignesh Trivedi10y ago
  Thanks for reading my article. here I am not passing two request, I am posting JSON data and files in single request. hope this will answer of your question.

Introduction

File upload is a common feature of many applications. Sometimes we need to upload multiple files with some data.

Problem Statement

I have developedan application using AngularJS and Web API 2 and I want to upload files as well as post some data. Both data and files, I want to post in a single request. How to achieve this?

Solution

This can be done in many ways. Here I am discussing one way that I feel is the best. The following steps are required tobe performed to achieve this. In this way, I will use directive in AngularJS and Web API.

Step 1: Define AngularJS Application.

var app = angular.module("AngularApp", []);

Step 2: Define “uploadFiles” directive

Here, I have created a simple directive for file upload that picks up the selected files and emits "selectedFiles" event which is written in Angular controller. In this event we just add files which are selected in to the files array. Later on in this article we will look this into controller code and will discuss it.

app.directive('uploadFiles', function () {
return {
scope: true, //create a new scope
link: function (scope, el, attrs) {
el.bind('change', function (event) {
var files = event.target.files;
//iterate files since 'multiple' may be specified on the element
for (var i = 0; i < files.length; i++) {
//emit event upward
scope.$emit("seletedFile", { file: files[i] });
}
});
}
};
});

Step 3: Define angular Controller

Next step is to define the angular controller. In the controller, I have defined “selectedFile” event which is emitted from the directive. In this event we just push the selected files in to array. Later on this will used to post the files. I have also defined dummy JSON data which I want to post to Web API with selected files. Save method of the controller is use angular http service to post data and files. The transformRequest is http service property and it can be a single function that returns the transformed value. Here we just are overriding the default Transformations. This will allow us to change way of data send up to the server.

app.controller("demoController", function ($scope, $http) {
//1. Used to list all selected files
$scope.files = [];
//2. a simple model that want to pass to Web API along with selected files
$scope.jsonData = {
name: "Jignesh Trivedi",
comments: "Multiple upload files"
};
//3. listen for the file selected event which is raised from directive
$scope.$on("seletedFile", function (event, args) {
$scope.$apply(function () {
//add the file object to the scope's files collection
$scope.files.push(args.file);
});
});
//4. Post data and selected files.
$scope.save = function () {
$http({
method: 'POST',
url: "http://localhost:51739/PostFileWithData",
headers: { 'Content-Type': undefined },
transformRequest: function (data) {
var formData = new FormData();
formData.append("model", angular.toJson(data.model));
for (var i = 0; i < data.files.length; i++) {
formData.append("file" + i, data.files[i]);
}
return formData;
},
data: { model: $scope.jsonData, files: $scope.files }
}).
success(function (data, status, headers, config) {
alert("success!");
}).
error(function (data, status, headers, config) {
alert("failed!");
});
};
});