I am uploading a file(word doc/pdf) using angularjs and spring3.0, when I submit the form using ng-submit() file data is not posting to angular controller, I have searched and tried here some examples but those are not working for me. can someone help to solve this problem. thanks in advance.
<form id="register-form" role="form" style="display: none;" ng-submit="regSubmit()">
<div class="form-group">
<input type="text" name="name" id="username" tabindex="1" class="form-control" placeholder="Full name" ng-model="formData.name">
</div>
<div class="form-group">
<input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" ng-model="formData.email">
</div>
<div class="form-group">
<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" ng-model="formData.password">
</div>
<!-- <div class="form-group">
<input type="password" name="confirm-password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
</div> -->
<div class="form-group">
<input type="text" name="mobile_no" id="mobile_no" tabindex="2" class="form-control" placeholder="Mobile No." ng-model="formData.mobile_no">
</div>
<div class="form-group">
<input type="file" name="fileUpload" accept=".doc,.docx,.rtf,.pdf" tabindex="2" class="form-control" placeholder="select File" demo-file-model="myFile">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
angularjs:
'use strict';
var MApp = angular.module('MApp', []);
MApp.controller('LoginController', function($scope, $location, $http, fileUploadService) {
var localaddress = $location.host()+':8080';
$scope.formData = {};
$scope.regSubmit = function(){
console.log($scope.formData);
var file = $scope.myFile;
var uploadUrl = 'http://'+localaddress+'/MApp/RegisterCandidate.html', //Url of webservice/api/server
promise = fileUploadService.uploadFileToUrl(file, uploadUrl, $scope.formData);
promise.then(function (response) {
alert("success");
}, function () {
alert("error file upalod")
})
}
});
/*
A directive to enable two way binding of file field
*/
MApp.directive('demoFileModel', function ($parse) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var model = $parse(attrs.demoFileModel),
modelSetter = model.assign; //define a setter for demoFileModel
element.bind('change', function () {
//Call apply on scope, it checks for value changes and reflect them on UI
scope.$apply(function () {
//set the model value
modelSetter(scope, element[0].files[0]);
});
});
}
};
});
MApp.service('fileUploadService', function ($http, $q) {
this.uploadFileToUrl = function (file, uploadUrl, formData) {
var fileFormData = new FormData();
fileFormData.append('fileUpload', file);
console.log(formData);
fileFormData.append('name', formData.name);
fileFormData.append('email', formData.email);
fileFormData.append('password', formData.password);
fileFormData.append('mobile_no', formData.mobile_no);
fileFormData.append('register-submit', 'Register Now');
var deffered = $q.defer();
$http.post(uploadUrl, fileFormData, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}
}).success(function (response) {
deffered.resolve(response);
}).error(function (response) {
deffered.reject(response);
});
return deffered.promise;
}
});