400 error bad request in angular and spring for file and form data
I am getting 415 error and when I tried to remove I started getting 400 error. please help me.
The html code -
<form ng-submit="save()" enctype="multipart/form-data">
<div >
username <input type="text" ng-model="username">
age <input type=" text" ng-model="age">
<input type="file" name ="newImage" ng-model="newImage" upload-files/>
<img file-preview="newImage" />
<li ng-repeat="file in files">{{file.name}}</li>
<br />
<input type="submit" value="Save">
</div>
</form>
The controller.java-
@RequestMapping(
value = "uploadFile.htm",
method = RequestMethod.POST)
@ResponseBody
public Object saveUserDataAndFile(
@RequestParam("model") User user,
@RequestParam("newImage") MultipartFile file) {
System.out.println("Inside File upload" +user+getUsername());
}
The script.js -
$scope.save = function () {
window.alert("json ::"+$scope.username +" "+$scope.age);
$scope.jsonData = {
username:$scope.username,
age: $scope.age
};
var file = $scope.files; //contain 1 image file
var json = $scope.jsonData;
$http({
method: 'POST',
url: 'fileDataController/uploadFile.htm',
headers: {
'Content-Type': undefined
},
data: {
model: $scope.jsonData,
newImage: $scope.files
},
transformRequest: function (data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function (value, key) {
window.alert(key+":"+value);
if(typeof data[key] == 'object' && !(data[key] instanceof File)){
formData.append(key, JSON.stringify(data[key]));
}else{
formData.append(key, data[key]);
}
});
var headers = headersGetter();
delete headers['Content-Type'];
return formData;
}
}).
success(function (data, status, headers, config) {
alert("success!"+status +data);
}).
error(function (data, status, headers, config) {
alert("failed!"+status +data);
});
};
The User.java -
@Entity
@Table(name="user")
public class User {
@Id
@GeneratedValue
private Integer id;
@Column
private String username;
@Column
private int age;
@Column
private Blob imgprofile;
//setter and getters
}
My upload file directive -
app.directive('uploadFiles', function () {
return {
restrict: 'A',
require: '?ngModel',
link: function ($scope, element, attrs, ngModel) {
if (!ngModel) {
return;
}
ngModel.$render = angular.noop;
element.bind('change', function (event) {
var files = event.target.files;
$scope.files.push(files); //storing file in files array
window.alert($scope.files.pop()); //showing object FileList
window.alert("change event size of file :::"+event.target.files[0].size);
ngModel.$setViewValue(event.target.files[0]);
$scope.$apply();
});
}
};
})
The error -
HTTP Status 400 - Required MultipartFile parameter 'newImage' is not present
type Status report
message Required MultipartFile parameter 'newImage' is not present
description The request sent by the client was syntactically incorrect.
Apache Tomcat/7.0.67
I suppose you should try the below. Please let me know your feedback. Thanks!
$http({
method: 'POST',
url: "fileDataController/uploadFile.htm",
headers: {
'Content-Type': 'multipart/form-data'
},
data: {
model: $scope.jsonData,
newImage: $scope.files[0]
},
transformRequest: function (data, headersGetter) {
var formData = new FormData();
angular.forEach(data, function (value, key) {
formData.append(key, value);
});
var headers = headersGetter();
delete headers['Content-Type'];
return formData;
}
}).success(function (response) {
//... more code...
}