I am trying to create a page using which I should be able to upload files from my machine to server using AngularJS and Java Servlet. I am sending the data to server using $http.post, and trying to read the file data sent using apache commons-fileupload, but the file data sent is not sent in multipart/form-data format due to which commons-fileupload is not detecting the file data on server side. If i send {headers:{'Content-Type':'multipart/form-data'}} as config parameter manually in the post request then it is throwing exception
Below is the html page and js file i am using
Html Page:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/upload.js"></script>
<head>
<title>Admin</title>
</head>
<body ng-app="uploadApp" ng-controller="UploadCtrl">
<form name="upload" class="form" data-ng-submit="addFile()">
<p>Please specify a file, or a set of files:<br>
<input type="file" name="file" onchange="angular.element(this).scope().attachedFile(this)" /></p>
<button type="submit">Upload</button>
</form>
</body>
</html>
JS file:
var app=angular.module('uploadApp',[]);
app.controller('UploadCtrl', ['$scope','$http',function($scope,$http) {
$scope.attachedFile = function(element) {
$scope.$apply(function($scope) {
$scope.file = element.files[0];
});
console.log('file attached');
};
$scope.addFile = function() {
var url = '/upload';
var fd = new FormData();
fd.append("file",$scope.file);
$http.post(url, fd)
.success(function(data, status, headers, config) {
console.log('success');
})
.error(function(data, status, headers, config) {
console.log('error');
})
};
}])
I tried to analyse the issue by reading the request.InputStream on the server side and got data in below format
------WebKitFormBoundaryXXXXXXXXXXXXX
Content-Disposition: form-data; name="file"; filename="XXX.txt"
Content-Type: text/plain
filedata
------WebKitFormBoundaryXXXXXXXXXXXXX--
The issue seems that the FormData generated is not setting Content-Type: multipart/form-data, instead, it is defaulting based on the file extension due to which reading file on server side with commons-fileupload is not working.
Can anyone suggest a solution to this. Is there anyway I can set the content type to multipart/form-data in the FormData/request created or any alternate way/library to parse the received data on the server side
