Save image path to Database using AngularJS in ASP.Net

Last Reply one year ago By dharmendr

Posted one year ago

====>the webservice

[WebMethod]
public string insert(string city,string country,string flag)
{
try
{
using(SqlConnection conn =new SqlConnection(clsMain.sqlconnstring))
{
conn.Open();
SqlCommand cmd = new SqlCommand("spInsertUploadPicture", conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@city", city);
cmd.Parameters.AddWithValue("@country",country);
cmd.Parameters.AddWithValue("@imgpath", string.Format("../imageUploads/{0}",flag));
cmd.ExecuteNonQuery();
return "Record Uploaded Successfully";
}
}
catch (Exception)
{

throw;
}
}

===>>>> the controller

.directive("fileInput",function($parse){
return {
restrict: "A",
link: function (scope,elem,attrs) {
elem.bind("change", function () {
$parse(attrs.fileInput).assign(scope, elem[0].files);
scope.$apply();
});
}
}
})

.controller("imageUploadPracticeController", function ($scope,$http,$timeout) {
var vm = this;
vm.loading = false;
vm.msg = false;
vm.error = false;
// read();

vm.imageUpload = function (event) {
var files = event.target.files;//filelist object
var file = files[files.length - 1];
vm.file = file;
var reader = new FileReader();
reader.onload = vm.imageIsLoaded;
reader.readAsDataURL(file);
}
vm.imageIsLoaded = function (e) {
$scope.$apply(function () {
vm.step = e.target.result;
});
}

vm.btnUpload = function () {
vm.loading = true;
var request = $http({
url: '../services/svImageUpload.asmx/insert',
method: 'POST',
data: { city: vm.City, country: vm.Country, flag: vm.file.name },
//transformRequest:angular.identity,
headers: {'content-type':undefined}
});
request.then(function (response) {
read();
vm.loading = false;
vm.error = false;
vm.hurray = response.data;
vm.msg = true;
}, function (error) {
vm.error = true;
vm.error = error.data;
vm.loading = false;
vm.msg = false;
});
//console.log(vm.City + ' ' + vm.Country + ' ' + vm.file.name);
}
var read = function () {
var request = $http("../services/svImageUpload.asmx/GetAllFiles")
.then(function (response) { vm.imgUploads = response.data; });
}
vm.closeSuccessMsg = function () {
vm.loading = false;
vm.msg = false;
vm.error = false;
$("#txtCity").val('');
$("#txtCountry").val('');
}
vm.closeErrorMsg = function () {
vm.loading = false;
vm.msg = false;
vm.error = false;
$("#txtCity").val('');
$("#txtCountry").val('');
}
});