Menu
I was trying to upload multiple input type file with multiple="true" using angular js and spring mvc but i got exception from server is "the request was rejected because no multipart boundary was found"
here i will put my code below
my jsp is
<html ng-app="myApp">
<body>
<div ng-controller="controller">
<input type="submit" name="submit" value="add" ng-click="add();" />
<form name="form" id="form" ng-submit="submitRecord(blog)" enctype="multipart/form-data" >
<div id="outerdiv" name="outerdiv">
</div>
</form>
</div>
</body>
</html>
here i was generate input elements from angular controller after clicking add and input controls are generate in "".
my angular controller is
'use strict';
var App = angular.module('TechnoBlogs', ['ngRoute','ui.router']);
var $injector = angular.injector(['ng']);
App.config(['$httpProvider', function ($httpProvider) {
/*$httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=UTF-8';*/
}],['$routeProvider',function($routeProvider){
$routeProvider.
when('/create', {
templateUrl: '/',
controller: 'controller'
});
}]);
var currentg1=0;
var controller = function($scope,$http,fileService){
$scope.blog = [];
/*var currentg1=0;*/
$scope.blog.desc=[];
$scope.blog.desccode=[];
$scope.blog.descimg=[];
$scope.add=function(){
var $div = angular.element("<br><div><label id='desc["+currentg1+"]' for='desc["+currentg1+"]'>Description"+currentg1+"<span style='color: red;''>*</span></label><textarea rows='3' cols='6' id='desc["+currentg1+"]' name='desc["+currentg1+"]' ng-model='blog.desc["+currentg1+"]' required='required'></textarea> </div><br><div><label id='desccodeL["+currentg1+"]' for='desccodeL["+currentg1+"]''>Code "+currentg1+"</label><textarea rows='3' cols='6' id='desccode["+currentg1+"]' name='desccode["+currentg1+"]' ng-model='blog.desccode["+currentg1+"]''></textarea></div><div><label id='descimgL["+currentg1+"]' for='descimgL["+currentg1+"]'>Image "+currentg1+"</label><input type='file' id='descimg["+currentg1+"]' class='file' name='descimg["+currentg1+"]' my-file-upload='descimg["+currentg1+"]' multiple/></div>");
var e=document.getElementById("outerdiv");
angular.element(e).append($div).injector().invoke(function($compile) {
var scope = angular.element($div).scope();
$compile($div)(scope);
});
currentg1++;
};
$scope.submitRecord=function(blog){
var fd = new FormData();
var files=[];
for(var i=0;i<currentg1;i++)
{
files[i] = fileService.getFile("descimg["+i+"]");
console.log("files["+i+"] ---> "+files[i]);
}
fd.append("files",files);
alert(fd);
console.log("--->>> "+files);
$http.post("saveblog",fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function(){
alert("success");
})
};
};
App.service('fileService', function () {
var file = {};
var fileService = {};
fileService.getFile = function (name) {
return file[name];
};
fileService.setFile = function (newFile, index, name) {
if (index === 0 && file[name] === undefined)
file[name] = [];
file[name][index] = newFile;
};
return fileService;
})
App.directive('myFileUpload', function (fileService) {
return function (scope, element, attrs) {
element.bind('change', function () {
var index;
var index_file = 0;
for (index = 0; index < element[0].files.length; index++) {
fileService.setFile(element[0].files[index], index_file, attrs.myFileUpload);
index_file++;
}
index_file = 0;
});
}
});
My spring controller is
@RequestMapping(value="/saveblog", method=RequestMethod.POST, headers = "'Content-Type': 'multipart/form-data'")
public void saveblog(MultipartHttpServletRequest request, HttpServletResponse response)
{
System.out.println("in multipart ");
Iterator<String> itr=request.getFileNames();
MultipartFile file=request.getFile(itr.next());
String fileName=file.getOriginalFilename();
System.out.println(fileName);
}
i also create a bean for multipart
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="2097152" />
</bean>
after that still got exception
my response header is
HTTP/1.1 404 Not Found
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=utf-8
Content-Language: en
Content-Length: 949
my request header is
POST /technoblogs/blog/saveblog HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 209
Accept: application/json, text/plain, */*
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.130 Safari/537.36
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7uIEu9ax8IY8nCde
Referer: http://localhost:8080/technoblogs/blog/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.8
Cookie: JSESSIONID=61816E4AB7F6905F688755CF22BC16FF
590
Maybe this link will help you. What you are missing is a content header.
From the linked answer:
Angular will POST as JSON even if you set the Content-Type to the correct value multipart/form-data. So we must transform our request manually to the correct data. … [using] a transformRequest function that does nothing as returning your original FormData … like this:
$http({
method: 'POST',
url: 'newDocument',
headers: {'Content-Type': 'multipart/form-data'},
data: formData,
transformRequest: function(data, headersGetterFunction) {
return data; // do nothing! FormData is very good!
}
})
Edit: Can you show us your HTTP response and/or request?
168
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
