ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Upload and Download files from database using AngularJS in ASP.Net<p>Hi&nbsp;rani,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><span style="text-decoration: underline;"><strong>Database</strong></span></p> <p>For this example i have&nbsp;used table named tblFilesPath whose schema and data are defined as follows.</p> <pre class="brush: sql">CREATE TABLE [dbo].[tblFilesPath] ( Id INT IDENTITY(1,1) PRIMARY KEY NOT NULL, Name NVARCHAR(50) NOT NULL, Path NVARCHAR(200) NOT NULL )</pre> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;html&gt; &lt;head&gt; &lt;title&gt;Upload Download File AngularJS&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; 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 &gt; div { font-size: smaller; background-color: red; width: 0; } table { border: 1px solid #ccc; } table th { background-color: #F7F7F7;color: #333;font-weight: bold; } table th, table td { padding: 5px;border-color: #ccc; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, [&#39;ngFileUpload&#39;]) app.controller(&#39;MyController&#39;, function ($scope, Upload, $http, $timeout) { PopulateFiles(); function PopulateFiles() { $http.post(&#34;Default.aspx/BindFiles&#34;, { headers: { &#39;Content-Type&#39;: &#39;application/json&#39;} }) .then(function (response) { $scope.Files = eval(response.data.d); }); } $scope.Download = function (path) { var config = { responseType: &#39;blob&#39; } var httpGet = $http.get(path, config); httpGet.then(function (response) { if (navigator.msSaveBlob) { navigator.msSaveBlob(new Blob([response.data], { type: &#39;octet/stream&#39; }), path.split(&#39;/&#39;)[1]); } else { var fileDownload = document.createElement(&#34;a&#34;); fileDownload.href = path; fileDownload.download = path.split(&#39;/&#39;)[1]; document.body.appendChild(fileDownload); fileDownload.click(); document.body.removeChild(fileDownload); } }); } $scope.UploadFiles = function (files) { $scope.SelectedFiles = files; if ($scope.SelectedFiles &amp;&amp; $scope.SelectedFiles.length) { Upload.upload({ url: &#39;Handler.ashx&#39;, data: { files: $scope.SelectedFiles } }).then(function (response) { $timeout(function () { $scope.Result = response.data; PopulateFiles(); }); }, function (response) { if (response.status &gt; 0) { var errorMsg = response.status + &#39;: &#39; + response.data; alert(errorMsg); } }, function (evt) { var element = angular.element(document.querySelector(&#39;#dvProgress&#39;)); $scope.Progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total)); element.html(&#39;&lt;div style=&#34;width: &#39; + $scope.Progress + &#39;%&#34;&gt;&#39; + $scope.Progress + &#39;%&lt;/div&gt;&#39;); }); } }; }); &lt;/script&gt; &lt;div ng-app=&#34;MyApp&#34; ng-controller=&#34;MyController&#34;&gt; &lt;input type=&#34;file&#34; multiple=&#34;multiple&#34; ngf-select=&#34;UploadFiles($files)&#34; /&gt;&lt;hr /&gt; Files: &lt;ul&gt;&lt;li ng-repeat=&#34;file in SelectedFiles&#34;&gt;{{file.name}}&lt;/li&gt;&lt;/ul&gt; &lt;div id=&#34;dvProgress&#34; class=&#34;progress&#34; ng-show=&#34;Progress &gt;= 0&#34;&gt;&lt;/div&gt;&lt;hr /&gt; &lt;table class=&#34;table table-striped table-bordered table-hover table-condensed&#34;&gt; &lt;tr&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Download&lt;/th&gt; &lt;/tr&gt; &lt;tbody ng-repeat=&#34;m in Files&#34;&gt; &lt;tr&gt; &lt;td&gt;{{m.Id}}&lt;/td&gt; &lt;td&gt;{{m.Name}}&lt;/td&gt; &lt;td&gt;&lt;input type=&#34;submit&#34; value=&#34;Download&#34; ng-click=&#34;Download(m.Path)&#34; /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Handler</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">&lt;%@ WebHandler Language=&#34;C#&#34; Class=&#34;Handler&#34; %&gt; using System; using System.Configuration; using System.Data.SqlClient; using System.IO; using System.Web; public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { foreach (string key in context.Request.Files) { HttpPostedFile postedFile = context.Request.Files[key]; string folderPath = context.Server.MapPath(&#34;~/Uploads/&#34;); if (!Directory.Exists(folderPath)) { Directory.CreateDirectory(folderPath); } postedFile.SaveAs(folderPath + postedFile.FileName); string constr = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { string query = &#34;INSERT INTO tblFilesPath VALUES (@Name,@Path)&#34;; using (SqlCommand cmd = new SqlCommand(query)) { cmd.Connection = con; cmd.Parameters.AddWithValue(&#34;@Name&#34;, postedFile.FileName); cmd.Parameters.AddWithValue(&#34;@Path&#34;, &#34;Uploads/&#34; + postedFile.FileName); con.Open(); cmd.ExecuteNonQuery(); con.Close(); } } } context.Response.StatusCode = 200; context.Response.ContentType = &#34;text/plain&#34;; context.Response.Write(&#34;Success&#34;); } public bool IsReusable { get { return false; } } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;%@ WebHandler Language=&#34;VB&#34; Class=&#34;Handler&#34; %&gt; Imports System Imports System.Configuration Imports System.Data.SqlClient Imports System.IO Imports System.Web Public Class Handler : Implements IHttpHandler Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest For Each key As String In context.Request.Files Dim postedFile As HttpPostedFile = context.Request.Files(key) Dim folderPath As String = context.Server.MapPath(&#34;~/Uploads/&#34;) If Not Directory.Exists(folderPath) Then Directory.CreateDirectory(folderPath) End If postedFile.SaveAs(folderPath &amp; postedFile.FileName) Dim constr As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Using con As SqlConnection = New SqlConnection(constr) Dim query As String = &#34;INSERT INTO tblFilesPath VALUES (@Name,@Path)&#34; Using cmd As SqlCommand = New SqlCommand(query) cmd.Connection = con cmd.Parameters.AddWithValue(&#34;@Name&#34;, postedFile.FileName) cmd.Parameters.AddWithValue(&#34;@Path&#34;, &#34;Uploads/&#34; &amp; postedFile.FileName) con.Open() cmd.ExecuteNonQuery() con.Close() End Using End Using Next context.Response.StatusCode = 200 context.Response.ContentType = &#34;text/plain&#34; context.Response.Write(&#34;Success&#34;) End Sub Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable Get Return False End Get End Property End Class</pre> <p><strong><span style="text-decoration: underline;">Namespaces </span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System.Collections.Generic; using System.Configuration; using System.Data.SqlClient; using System.Web.Script.Serialization; using System.Web.Services;</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Collections.Generic Imports System.Configuration Imports System.Data.SqlClient Imports System.Web.Script.Serialization Imports System.Web.Services</pre> <p><strong><span style="text-decoration: underline;">Code</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">[WebMethod] public static string BindFiles() { return (new JavaScriptSerializer().Serialize(GetFiles())); } public static List&lt;File&gt; GetFiles() { List&lt;File&gt; files = new List&lt;File&gt;(); using (SqlConnection conn = new SqlConnection()) { conn.ConnectionString = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; using (SqlCommand cmd = new SqlCommand(&#34;SELECT * FROM tblFilesPath&#34;)) { cmd.Connection = conn; conn.Open(); using (SqlDataReader sdr = cmd.ExecuteReader()) { while (sdr.Read()) { files.Add(new File { Id = Convert.ToInt32(sdr[&#34;Id&#34;]), Name = sdr[&#34;Name&#34;].ToString(), Path = sdr[&#34;Path&#34;].ToString() }); } } conn.Close(); } } return files; } public class File { public int Id { get; set; } public string Name { get; set; } public string Path { get; set; } }</pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">&lt;WebMethod()&gt; Public Shared Function BindFiles() As String Return (New JavaScriptSerializer().Serialize(GetFiles())) End Function Public Shared Function GetFiles() As List(Of File) Dim files As List(Of File) = New List(Of File)() Using conn As SqlConnection = New SqlConnection() conn.ConnectionString = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Using cmd As SqlCommand = New SqlCommand(&#34;SELECT * FROM tblFilesPath&#34;) cmd.Connection = conn conn.Open() Using sdr As SqlDataReader = cmd.ExecuteReader() While sdr.Read() files.Add(New File With { .Id = Convert.ToInt32(sdr(&#34;Id&#34;)), .Name = sdr(&#34;Name&#34;).ToString(), .Path = sdr(&#34;Path&#34;).ToString() }) End While End Using conn.Close() End Using End Using Return files End Function Public Class File Public Property Id As Integer Public Property Name As String Public Property Path As String End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/xLN7hzK.gif" alt="" width="472" height="401" /></span></strong></p>https://www.aspforums.net:443/Threads/835227/Upload-and-Download-files-from-database-using-AngularJS-in-ASPNet/https://www.aspforums.net:443/Threads/835227/Upload-and-Download-files-from-database-using-AngularJS-in-ASPNet/Thu, 18 Jul 2019 08:21:30 GMT