AngularJs File Upload in asp.net mvc - html

Question

here is what I've tried till now
I cant send that file to my action result, its showing me null,
<form ng-show="divPatient" name="PatientForm" ng-submit="AddUpdatePatient()">
<table>
<tr>
<td>
<input class="form-control" type="text" readonly placeholder="Key (Automatic)" ng-model="PatientID" />
</td>
<td>
<input id="FormFocus" name="FirstName" class="form-control" type="text" placeholder="FirstName" ng-model="FirstName" ng-minlength="3" required />
</td>
<td>
<input name="LastName" class="form-control" type="text" placeholder="LastName" ng-model="LastName" ng-minlength="3" required />
</td>
<td>
<input class="form-control" type="text" placeholder="Disease" ng-model="Disease" name="Disease" ng-minlength="3" required />
</td>
<td>
<input class="form-control" type="number" placeholder="Phone No." ng-model="PhoneNo" name="PhoneNo" ng-pattern="/^[789]\d{9}$/" required />
</td>
<td>
<input type="file" onchange="angular.element(this).scope().selectFileforUpload(this.files)" accept="image/*" class="form-control" ng-model="PhotoURL" value="{{PhotoURL}}" required />
</td>
<td colspan="2">
<input type="submit" value="save" class="btn btn-success" ng-disabled="PatientForm.PhoneNo.$dirty && PatientForm.PhoneNo.$invalid || PatientForm.LastName.$dirty && PatientForm.LastName.$invalid || PatientForm.FirstName.$dirty && PatientForm.FirstName.$invalid || PatientForm.Disease.$dirty && PatientForm.Disease.$invalid" />
<input type="button" value="cancel" class="btn btn-primary" ng-click="CancelForm()" />
</td>
</tr>
<tr>
<td></td>
<td><span class="eror-text" ng-show="PatientForm.FirstName.$error.minlength">min 3 letters</span></td>
<td><span class="eror-text" ng-show="PatientForm.LastName.$error.minlength">min 3 letters</span></td>
<td><span class="eror-text" ng-show="PatientForm.Disease.$error.minlength">min 3 letters</span></td>
<td><span class="eror-text" ng-show="PatientForm.PhoneNo.$error.pattern">Invalid phone no</span></td>
</tr>
</table>
</form>
$scope.selectFileforUpload = function (files) {
$scope.selectedFile = files;
}
$scope.AddUpdatePatient = function () {
var file = $scope.selectedFile[0];
var Patient = {
FirstName: $scope.FirstName,
LastName: $scope.LastName,
Disease: $scope.Disease,
PhoneNo: $scope.PhoneNo
};
var getData = angularService.AddPatient(Patient,filee);
getData.then(function (msg) {
GetAllPatients();
alert(msg.data);
$scope.divPatient = false;
}, function () {
alert('Error in adding record');
});
}
here is my service code
this.AddPatient = function (patient, file) {
// this showing me file object thats fine
alert("in services" + filee);
// i think something wrong here we shouldn't or can't send the file to actionresult like this
var response = $http({
method: "post",
url: "AddPatient",
data: JSON.stringify(patient),
dataType: "json",
// something wrong here ??
file : file
});
return response;
}
amd last my method in my controller
public string AddPatient(Patient patient,HttpPostedFileBase file)
{
// I'm getting patient data that is fine, but file is showing me null
}
is anything wrong with my service method ??? or do you know how to send form along with files to actionresult or any method in the mvc controller, i heard some pleople do it by using "new FormData", but i dont know that, but i'm willing to learn it or use it, if that solves my problem