uploading file using angularjs and spring - angularjs

Question

I have an input type="file" as following :
<input id="identityDocument" name="identityDocument" ng-model="candidature.identityDocument"
ui-jq="filestyle" type="file" class="filestyle input-lg"
file-model="uploadIdentityDocument"
ui-options="{
buttonText: '{{'ACTIONS.UPLOAD' | translate}}',
iconName: 'fa fa-inbox'
}"
accept="image/*" valid-file required>
to let this input file known in the scope I use this directive :
.directive('fileModel',function($parse){
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
});
So I want when I submit this form to upload the file in it as following :
let file = $scope.uploadIdentityDocument;
let fd = new FormData();
fd.append('file', file);
$http.post('http://localhost:8080/fileUpload', fd, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
})
.success(function(){
})
.error(function(){
});
in the server side this my rest service :
#RestController
public class UploadService {
#Autowired
IUploadMetier uploadMetier;
#RequestMapping(value="/fileUpload", method = RequestMethod.POST)
public ResponseEntity<String> UploadFile(MultipartHttpServletRequest request) {
String response = uploadMetier.uploadFile(request);
if(response.equals("false")){
return new ResponseEntity<>("There was an error uploading this file: " + response + " to the server :-(", HttpStatus.INTERNAL_SERVER_ERROR);
}else{
return new ResponseEntity<>("The file: " + response + " has uploaded successfully :-)", HttpStatus.OK);
}
}
}
and this is the function which uploads the file :
public String uploadFile(MultipartHttpServletRequest request) {
Iterator<String> itr=request.getFileNames();
MultipartFile file=request.getFile(itr.next());
String fileName=file.getOriginalFilename();
File dir = new File("\\MyPath");
if (dir.isDirectory())
{
File serverFile = new File(dir,fileName);
BufferedOutputStream stream = null;
try {
stream = new BufferedOutputStream(
new FileOutputStream(serverFile));
stream.write(file.getBytes());
stream.close();
} catch (IOException e) {
e.printStackTrace();
return "false";
}
}else {
return "false";
}
return fileName;
}
but then I get this error message :
java.util.NoSuchElementException: null
at java.util.LinkedHashMap$LinkedHashIterator.nextNode(LinkedHashMap.java:713) ~[na:1.8.0_73]
at java.util.LinkedHashMap$LinkedKeyIterator.next(LinkedHashMap.java:734) ~[na:1.8.0_73]
at org.capvalue.fme.metier.mpl.UploadMetierImpl.uploadFile(UploadMetierImpl.java:19) ~[classes/:na]
at org.capvalue.fme.web.rest.UploadService.UploadFile(UploadService.java:23)
the line UploadMetierImpl.java:19 refers to : MultipartFile file=request.getFile(itr.next());
how can I solve this ?
Edit :
I just noticed that when I console.log $scope.uploadIdentityDocument I get undefined, and I don't know why I'm getting that !

Answer 1

The error was that the $scope.identityDocUpload was not defined, the solution was to delete that fileModel directive I used and I added this to my input :
onchange="angular.element(this).scope().setFile(this,'identityDocumentUpload')"
The setFile function :
$scope.setFile = function(element, name) {
$parse(name).assign($scope, element.files[0]);
}