Search Posts

angularjs fileupload with promise not working in spring mvc

how to angularjs fileupload with promise not working in spring mvc

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="">
              <div class="form-group">
                <input type="email" name="email" id="email" tabindex="1" class="form-control" placeholder="Email Address" ng-model="">
              <div class="form-group">
                <input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password"  ng-model="formData.password">
              <!-- <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 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 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">


'use strict';
var MApp = angular.module('MApp', []);

MApp.controller('LoginController', function($scope, $location, $http, fileUploadService) {

    var localaddress = $':8080';
    $scope.formData = {};

    $scope.regSubmit = function(){

        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) {
        }, 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);
        fileFormData.append('password', formData.password);
        fileFormData.append('mobile_no', formData.mobile_no);
        fileFormData.append('register-submit', 'Register Now');

        var deffered = $q.defer();
        $, fileFormData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}

        }).success(function (response) {

        }).error(function (response) {

        return deffered.promise;

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *