i'm trying to upload a file to my server like, save a path to database and file to folder, for that i tried ng-file-upload here is my code.
<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" ng-file-select="onFileSelect($files)" class="form-control" ng-model="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>
here is my Angular code
var app = angular.module('StudentApp', ['ngFileUpload']);
app.controller("StudentCtrl", function ($scope, angularService) {
$scope.selectedFile = [];
//On file Select
$scope.onFileSelect = function ($files) {
//This function not running at all ??
alert("where I'm i ???");
//$scope.selectedFile = $files;
//alert($files);
}
$scope.AddUpdatePatient = function () {
var file = $scope.selectedFile[0];
alert($scope.PhotoURL);
var Patient = {
FirstName: $scope.FirstName,
LastName: $scope.LastName,
Disease: $scope.Disease,
PhoneNo: $scope.PhoneNo
};
var getAction = $scope.Action;
if (getAction == "Update") {
Patient.PatientID = $scope.PatientID;
var getData = angularService.UpdatePatient(Patient,file);
getData.then(function (msg) {
GetAllPatients();
alert(msg.data);
$scope.divPatient = false;
}, function () {
alert('Error in updating record');
});
} else {
var getData = angularService.AddPatient(Patient);
getData.then(function (msg) {
GetAllPatients();
alert(msg.data);
$scope.divPatient = false;
}, function () {
alert('Error in adding record');
});
}
}
My dependencies
bundles.Add(new ScriptBundle("~/bundles/CustomPlugins").Include(
"~/Scripts/ng-file-upload-shim.min.js",
"~/scripts/angular.min.js",
"~/Scripts/ng-file-upload.min.js"));
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/CustomPlugins")
Where did i go wrong, pls tell me how do i upload file to the actionresult using angularjs, thank you
ok i tried onchange
onchange="angular.element(this).scope().selectFileforUpload(this.files)"
but i cant send that file to my action result, its showing me null,
$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",
file : file
});
return response;
}
amd last my action result
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
As Guinn mentions in the comments above, the 'ng' that is used for ng-file-upload is not the one in your code.
The symptoms you are seeing definitely match what I have seen happen when the wrong directive is used.
The ng-file-upload git-hb now actually contains some fiddles which you can verify in your browser and then use the same syntax to ensure your implementation works:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.