I am new to angularjs and i am not able to understand the examples on internet for angularjs file upload directive. I have a following class :
@Entity
public class StudentPicture implements Serializable {
private static final long serialVersionUID = 1L;
@Id private String studentId;
private byte[] picture;
// getters setters
}
And i want to save the picture in database So far i have done this Controller
@RequestMapping(value = "/sampletest", method = RequestMethod.POST)
public void mySample(@RequestBody StudentPicture studentPicture) {
System.out.println(studentPicture.getStudentId());
}
My jsp form is
var sample = angular.module('sample', [ "xeditable", "ui.bootstrap" ])
.config(function($httpProvider) {
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
});
sample.controller("sampleController", function($scope, $http, $timeout, $filter) {
$scope.studentId = "";
$scope.picture = {};
$scope.uploadFile = function() {
var data = {studentId : $scope.studentId, picture: $scope.picture };
var response = $http.post('${pageContext.servletContext.contextPath}/sampletest', data);
response.success(function(data, status, headers, config) {
alert("jj");
});
response.error(function(data, status, headers, config) {
alert("Exception details: " + JSON.stringify({ data : data }));
});
};
});
</script>
<body>
<div ng-app="sample" ng-controller="sampleController">
<input type="text" ng-model="studentId">
<input type="file" ng-model="picture">
<button ng-click="uploadFile">Submit</button>
</div>
My Multipart configuration is :
public MultipartResolver multipartResolver(){
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver();
multipartResolver.setMaxUploadSize(1000000);
return multipartResolver;
}
@Bean
public MultipartConfigElement multipartConfigElement(){
return new MultipartConfigElement("");
}
ERROR : The request sent by client is syntactically incorrect
