file upload with other form data getting file undefined angularjs - 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.

Answer 1

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