ng-file upload not sending file along with other data - angularjs

Question

i am using angular js frontend along with ng-file module and laravel backend, and for some reason unknown, ng fileupload doesn't send file along with other form data:
here is my form:
<form method="post" name="myForm">
<div class="form-group has-feedback">
<input type="file" ngf-select ng-model="picFile" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFile">
<i ng-show="myForm.file.$error.required">*required</i><br>
<i ng-show="myForm.file.$error.maxSize">File too large
{{errorFile.size / 1000000|number:1}}MB: max 2M</i>
<img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button>
</div>
<div class="form-group has-feedback">
<input class="form-control input-lg" id="username" type="text" name="username" ng-model="user.username" placeholder="Name"
required
ng-minlength="6"
autofocus>
</div>
<div class="form-group has-feedback">
<input class="form-control input-lg" type="email" id="email" name="email" ng-model="user.email" placeholder="Email" required>
</div>
<div class="form-group has-feedback">
<input class="form-control input-lg" type="text" id="firstname" name="firstname" ng-model="user.firstname" placeholder="First Name">
</div>
<div class="form-group has-feedback">
<input class="form-control input-lg" type="text" id="lastname" name="lastname" ng-model="user.lastname" placeholder="Last Name">
</div>
<button type="submit" class="btn btn-lg btn-block btn-primary" ng-disabled="!myForm.$valid" ng-click="updateProfile(picFile)" >Update</button>
<span class="progress" ng-show="picFile.progress >= 0">
<div style="width:{{picFile.progress}}%"
ng-bind="picFile.progress + '%'"></div>
</span>
<span ng-show="picFile.result">Upload Successful</span>
<span class="err" ng-show="errorMsg">{{errorMsg}}</span>
{{picFile}}
</form>
and here is my controller:
$scope.getProfile = function() {
Account.getProfile()
.then(function(response) {
$scope.user = response.data;
})
.catch(function(response) {
toastr.error(response.data.message, response.status);
});
};
$scope.updateProfile = function(file) {
file.upload = Upload.upload({
url: '/kilo/api/me',
data: {username: $scope.user.username, file: file },
method:"POST"
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data.message;
console.log(file.result);
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
// Math.min is to fix IE which reports 200% sometimes
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
};
the above sends only the "username" and leaves the file. please can anyone show me what am doing wrong?

Answer 1

Add arrayKey: '', headers: { 'Content-Type': undefined }, to your upload object.