File upload with data using angular js and jersey webservice
1. jersey service.
@POST
@Path("/public")
@Consumes(MediaType.MULTIPART_FORM_DATA)
public void get(
@FormDataParam("file") byte[] fileInputStream,
@FormDataParam("file") FormDataContentDisposition fileInputDetails,
@FormDataParam("id")String userid){
System.out.println("THis is the ID "+userid);
System.out.println("File Details : "+ fileInputDetails.getFileName());
System.out.println("Reading the String data "+ fileInputStream.toString());
String s = new String(fileInputStream);
System.out.println("Text Decryted : " + s);
}
2. create the angular js service,directive,controller
Service.
service('myFileService',["$http",function($http){
console.log("service is called");
this.post = function(uploadUrl, data){
var fd = new FormData(); // bunch of key,value
console.log("uploaded URL "+uploadUrl);
console.log("uploaded data "+data);
for(var key in data) {
console.log("key is : "+ key + " , value : "+ data[key]);
fd.append(key, data[key]);
}
$http.post(uploadUrl, fd, {
transformRequest: angular.indentity,
headers: { 'Content-Type': undefined }
})
.success(function(){
console.log("from service success");
})
.error(function(){
console.log("from service failure");
})
}
}]);
Directive : to bind the file data
directive('fileModel', ['$parse', function($parse){
return {
restrict: 'A',
link : function(scope, element, attrs){
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(changeEvent){
scope.$apply(function(){
modelSetter(scope, changeEvent.target.files[0]);
});
});
}
};
}]);
Controller :
controller("postCTRL",['$scope','myFileService',function($scope,myFileService){
$scope.sample = {};
$scope.Submit = function(){
console.log($scope.sample.name);
var uploadedURL = "/public";
var data = $scope.sample;
myFileService.post(uploadedURL,data);
}
}]);
3. HTML FORM
<form>
<p> Name : <input type="text" name="name" ng-model="sample.id" required /></p>
<input type="file" id="exampleInputFile" file-model="sample.file">
<button ng-click="Submit()">Submit</button>
</form>
{{sample}}
</div>
Ref :
1.
stackoverflow
