Hi SUJAYS,
Refer below article.
Chek the below sample for saving in Database.
SQL
CREATE TABLE tblFilesPath
(
Id INT IDENTITY PRIMARY KEY,
FileName VARCHAR(100),
FilePath VARCHAR(MAX)
)
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ContentResult Upload()
{
string path = Server.MapPath("~/Uploads/");
if (!Directory.Exists(path))
{
Directory.CreateDirectory(path);
}
foreach (string key in Request.Files)
{
HttpPostedFileBase postedFile = Request.Files[key];
postedFile.SaveAs(path + postedFile.FileName);
string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
string query = "INSERT INTO tblFilesPath VALUES (@Name,@Path)";
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Name", postedFile.FileName);
cmd.Parameters.AddWithValue("@Path", "~/Uploads/" + postedFile.FileName);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
return Content("Success");
}
}
View
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
.thumb {
width: 24px;
height: 24px;
float: none;
position: relative;
top: 7px;
}
form .progress {
line-height: 15px;
}
.progress {
display: inline-block;
width: 100px;
border: 3px groove #ccc;
}
.progress > div {
font-size: smaller;
background-color: red;
width: 0%;
}
</style>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['ngFileUpload'])
app.controller('MyController', function ($scope, Upload, $timeout) {
$scope.UploadFiles = function (files) {
$scope.SelectedFiles = files;
if ($scope.SelectedFiles && $scope.SelectedFiles.length) {
Upload.upload({
url: '/Home/Upload/',
data: {
files: $scope.SelectedFiles
}
}).then(function (response) {
$timeout(function () {
$scope.Result = response.data;
});
}, function (response) {
if (response.status > 0) {
var errorMsg = response.status + ': ' + response.data;
alert(errorMsg);
}
}, function (evt) {
var element = angular.element(document.querySelector('#dvProgress'));
$scope.Progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
element.html('<div style="width: ' + $scope.Progress + '%">' + $scope.Progress + '%</div>');
});
}
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="file" multiple="multiple" ngf-select="UploadFiles($files)" />
<hr />
Files:
<ul><li ng-repeat="file in SelectedFiles">{{file.name}}</li></ul>
<div id="dvProgress" class="progress" ng-show="Progress >= 0">
</div>
</div>
</body>
</html>
Screenshots
The Form
Database After Insert
