Image displaying error from database

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);

    }