Spring MultipartException: The current request is not a multipart request - angularjs

Question

I'm trying to upload a file with AngularJS and Spring controller.
The Angular controller looks like this:
$scope.uploadFile=function(){
var formData=new FormData();
formData.append("file",file.files[0]);
$http.post('/content-files/upload /', file.files[0], {
transformRequest: function(data, headersGetterFunction) {
return data; // do nothing! FormData is very good!
},
headers: {'Content-Type': undefined }
})
.success(function(){
console.log('Post Succeded !');
})
.error(function(){
console.log('Post Failed .');
});
}
I also try this:
var formData = new FormData();
formData.append('file',file.files[0]);
$http.post('/content-files/upload /', formData, {
headers: { 'Content-Type': undefined },
transformRequest: angular.identity
})
and the Spring controller looks like this:
#RequestMapping(value = "/content-files/upload/", method = RequestMethod.POST )
public #ResponseBody String handleFileUpload( #RequestParam("file") MultipartFile file) {
System.out.println("BrandController.uploadMultipart()");
String name=file.getName();
if (!file.isEmpty()) {
try {
byte[] bytes = file.getBytes();
BufferedOutputStream stream =
new BufferedOutputStream(new FileOutputStream(new File(name)));
stream.write(bytes);
stream.close();
return "You successfully uploaded " + name + "!";
} catch (Exception e) {
return "You failed to upload " + name + " => " + e.getMessage();
}
} else {
return "You failed to upload " + name + " because the file was empty.";
}
}
My html Page is :
<form enctype="multipart/form-data">
<input id="file-0a" class="file" type="file" file-model="myFile" name="myFile" />
<button ng-click="uploadFile()">upload me</button></form>
i have 2 jars in web-inf/lib:commons-upload.jar and commons-io.jar
I add this in my spring configuration file:
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="50000000"/>
</bean>
When I'm trying to upload a file, I get the error:
org.springframework.web.multipart.MultipartException: The current request is not a multipart request
When I'm trying to upload a file using MultipartHttpServletRequest in my spring function instead of Multipart i get this error:
java.lang.IllegalStateException: Current request is not of type [org.springframework.web.multipart.MultipartHttpServletRequest]: org.apache.catalina.connector.RequestFacade#196f5636
When i use HttpServletRequest request and i try to cast it i got a ClassCastException.
Nothing change when i cancel enctype="multipart/form-data" from my form Tag

Answer 1

Two things needed:
1. headers: {'Content-Type': 'application/x-www-form-urlencoded'}
2. The data passed should be converted to a URL-encoded string
reference:
enter link description here

Answer 2

I stuck into the same problem. Below is angular code
things you should do:
Remove the Content-Type from headers.
For multi file upload use below code
handleImageUpload = async (event) => {
if (event.target.files && event.target.files) {
const files = event.target.files;
_.map(files, (file) => {
//array for multiple files upload
this.imageData.push(file);
const reader = new FileReader();
//base64 encoded image for preview
reader.onload = async (event: any) => {
this.album.push(event.target.result);
};
reader.readAsDataURL(file);
});
this.uploadedImage = Promise.resolve(this.album);
}
}
In you submit handler use this code
const formData: any = new FormData();
// adding multiple files
this.imageData.map((i) => {
formData.append("files", i);
});
// add objects
_.map(body,(value,key) => {
formData.append(key, value);
});
// delete headers it will be set by browser
headers = headers.delete("Content-Type");
// make a call to api
this.httpClient
.post(url, formData, { headers })
.subscribe((res) => console.log(res));