angularjs fileupload with promise not working in s

2019-03-04 07:43发布

问题:

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;
    }
});