Image displaying error from database - asp.net-mvc

Question

After the recent changes in my application still i get this issue while displaying the image using the relative path in the database. Error: 404 NOT FOUND http://localhost:1256/Empdet/%22/Photos/jobs.jpg%22
Controller.js:
$scope.UploadFile = function () {
console.log('UploadFile');
console.log($scope.Empdet.PhotoFile);
var file = $scope.Empdet.PhotoFile;
console.log('file is ' + JSON.stringify(file));
var uploadUrl = "../Photos";
console.log('before file upload');
EmployeeFactory.UploadFile(file, uploadUrl).success(function (response) {
$scope.Empdet.PhotoText = response;
console.log('$scope.Empdet.PhotoText');
console.log(response);
}).error(function () {
console.log('error');
});
console.log('after file upload');
};
service.js:
service.UploadFile = function (file, uploadUrl) {
var fd = new FormData();
fd.append('file', file);
return $http.post('/Empdet/UploadFile', fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
});
}
EmpdetController.cs:
[HttpPost]
public ActionResult UploadFile()
{
var file = Request.Files[0];
var path = Path.Combine(Server.MapPath("~/Photos/"), file.FileName);
file.SaveAs(path);
// prepare a relative path to be stored in the database and used to display later on.
var filename = Url.Content("~/Photos/" + file.FileName);
// save to db
return Json(filename.ToString(), JsonRequestBehavior.AllowGet);
}

Answer 1

Remove the .toString() from your function, the FileName property already returns a string.
[HttpPost]
public ActionResult UploadFile()
{
var file = Request.Files[0];
var path = Path.Combine(Server.MapPath("~/Photos/") + file.FileName);
file.SaveAs(path);
// prepare a relative path to be stored in the database and used to display later on.
string filename = Url.Content("~/Photos/" + file.FileName);
// save to db
return Json(filename, JsonRequestBehavior.AllowGet);
}
Parse the return in your controller. This should get rid of the extra quotes(") in your URL.

Answer 2

controller.js:
$scope.UploadFile = function () {
console.log('UploadFile');
console.log($scope.Empdet.PhotoFile);
var file = $scope.Empdet.PhotoFile;
console.log('file is ' + JSON.stringify(file));
var uploadUrl = '/Empdet/UploadFile';
console.log('before file upload');
EmployeeFactory.UploadFile(file, uploadUrl).success(function (response) {
console.log(JSON.parse(response));
console.log('$scope.Empdet.PhotoText');
$scope.Empdet.PhotoText = JSON.parse(response);
}).error(function () {
console.log('error');
});
console.log('after file upload');
};
EmpdetController.cs:
[HttpPost]
public ActionResult UploadFile()
{
var file = Request.Files[0];
var path = Path.Combine(Server.MapPath("~/Photos/") + file.FileName);
file.SaveAs(path);
// prepare a relative path to be stored in the database and used to display later on.
string filename = Url.Content("~/Photos/" + file.FileName);
// save to db
return Json(filename, JsonRequestBehavior.AllowGet);
}