file upload with other form data getting file undefined angularjs

Question

'use strict';
        var app = angular.module('myApp', []);
        app.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() {
                        scope.$apply(function() {
                            modelSetter(scope, element.files[0]);
                            modelSetter(scope, element[0].files[0]);
                        });
                    });
                }
            };
        }]);

        app.service('fileUpload', ['$http', function($http) {
            this.uploadFileToUrl = function(data, file, uploadUrl) {
                var fd = new FormData();

                fd.append('name', data.name);
                fd.append('phone', data.phone);
                fd.append('experience', data.experience);
                fd.append('email', data.email);
                fd.append('position', data.position);
                fd.append('resume', file);

                var promise = $http.post(uploadUrl, fd, {
                    transformRequest: angular.identity,
                    headers: {
                        'Content-Type': undefined
                    }
                });

                promise.then(function(response) {
                    var request = response.data;
                    if (request.success == "true") {
                        alert("Thank you for getting in touch with Mohar");

                        var inst = $('[data-remodal-id=modal]').remodal();
                        inst.close();

                        $scope.userForm.$setPristine();
                        $scope.userForm.$setUntouched();
                    } else {
                        alert("Please try after sometime");
                        window.location.href = 'career.html';
                    }
                });
            }
        }]);

        app.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload) {
            $scope.val1 = 'Sr. Python Developer';
            $scope.val2 = 'Jr. Python Developer';
            $scope.val3 = 'Sr. UI Developer';
            $scope.val4 = 'Jr. UI developer';
            $scope.val5 = 'Sr. Android Developer';
            $scope.val6 = 'Jr. Android Developer';
            $scope.val7 = 'Sr. Tester';
            $scope.val8 = 'Jr. Tester';
            $scope.val9 = 'Sr. Devops Engineer';
            $scope.val10 = 'Graphic designer';

            $scope.applyJob = function(val) {
                $scope.name = '';
                $scope.phone = '';
                $scope.experience = '';
                $scope.email = '';
                $scope.position = val
                console.log('clicked', $scope.position);
            }

            $scope.uploadFile = function() {
                var data = {
                    'name': $scope.name,
                    'phone': $scope.phone,
                    'experience': $scope.experience,
                    'email': $scope.email,
                    'position': $scope.position
                }
                var file = $scope.myFile;
                console.log('file is ', $scope.myFile)

                var uploadUrl = "career.php";
                fileUpload.uploadFileToUrl(data, file, uploadUrl);
            };
        }]);

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
    <div ng-app="myApp" ng-controller="myCtrl">
<form name="userForm" class="job-form" autocomplete="off">
            <div class="row">
                <div class="form-group">
                    <input type="text" class="form-control form-control-payment" ng-model="name" name="name" id="name" ng-pattern="/^[a-zA-Z ]*$/" ng-minlength="1" ng-maxlength="20" placeholder="Full Name" required />
                    <div ng-show="userForm.name.$dirty && userForm.name.$invalid || userForm.name.$touched">
                        <p ng-show="userForm.name.$error.required">Please enter name</p>
                        <p ng-show="userForm.name.$error.pattern">Please enter valid name</p>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control form-control-payment" ng-model="phone" name="phone" id="number" ng-pattern="/^[0-9]*$/" ng-minlength="10" ng-maxlength="10" placeholder="Phone Number" required />
                    <div ng-show="userForm.phone.$dirty && userForm.phone.$invalid || userForm.phone.$touched">
                        <p ng-show="userForm.phone.$error.required">Please enter contact number</p>
                        <p ng-show="userForm.phone.$error.minlength">Please enter minimum 10 digit</p>
                        <p ng-show="userForm.phone.$error.maxlength || userForm.phone.$error.pattern">Please enter valid contact number</p>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control form-control-payment" ng-model="experience" name="experience" id="experience" ng-pattern="/^[0-9]*$/" placeholder="Experience" required />
                    <div ng-show="userForm.experience.$dirty && userForm.experience.$invalid || userForm.experience.$touched">
                        <p ng-show="userForm.experience.$error.required">Please enter total experience</p>
                        <p ng-show="userForm.experience.$error.pattern">Please enter only numbers</p>
                    </div>
                </div>
                <div class="form-group">
                    <input type="email" class="form-control form-control-payment" name="email" ng-model="email" id="email" placeholder="E-mail" required />
                    <div ng-show="userForm.email.$dirty && userForm.email.$invalid || userForm.email.$touched">
                        <p ng-show="userForm.email.$error.required">Email is required.</p>
                        <p ng-show="userForm.email.$error.email">Invalid email address.</p>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control form-control-payment" id="position" ng-model="position" ng-readonly="true" placeholder="Position" required />
                    <!-- <input type="text" class="form-control" id="position" placeholder="e.g: UI DEVELOPER" required> -->
                </div>
                <div class="form-group">
                    <input type="file" class="form-control form-control-payment" fileModel="myFile" id="resume" required>
                </div>
                <button type="submit" class="btn btn-submit pull-right" ng-click="uploadFile()">Submit</button>
            </div>
            <!-- ng-disabled="userForm.$invalid" -->
        </form>
</div>

hello, I am using angularjs for validation & HTTP call. I want to post a file with some other form data like name, email, phone, experience, position etc.when I click on submit button It send an empty file. I don't understand what is wrong with this code please help i am new to angularjs. thank you in advance.

In the filesModel directive there the modelSetter function is being invoked twice. The first one is likely throwing an error and the second one gets skipped. — georgeawg
– georgeawg, Commented Jun 11, 2018 at 13:19

georgeawg · Accepted Answer · 2018-06-11 13:51:49Z

In the fileModel directive, delete the erroneous line:

app.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() {
                scope.$apply(function() {
                    ̶m̶o̶d̶e̶l̶S̶e̶t̶t̶e̶r̶(̶s̶c̶o̶p̶e̶,̶ ̶e̶l̶e̶m̶e̶n̶t̶.̶f̶i̶l̶e̶s̶[̶0̶]̶)̶;̶                         
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

In the template, instantiate the directive with kebab-case not camelCase:

<input type="file" class="form-control form-control-payment"
       ̶f̶i̶l̶e̶M̶o̶d̶e̶l̶=̶"̶m̶y̶F̶i̶l̶e̶"̶
       file-model="myFile"
       id="resume" required>

For more information, see AngularJS Developer Guide - Directive Normalization

Collectives™ on Stack Overflow

file upload with other form data getting file undefined angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related