How To Upload Video In Database And Play In GridView Using ASP.NET

In this article we are going to learn how to upload video in project folder and save its path in SQL server database table. We will bind that table to gridview and play audio using html5 video element.

Introduction

In this article we are going to learn how to upload a video in a project folder and save its path in a SQL server database table. We will bind that table to gridview and play audio using html5 video element.

Step 1

Create database in the SQL server of your choice.

 

  1. CREATE TABLE [dbo].[Videos](  
  2.     [ID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Name] [nvarchar](50) NULL,  
  4.     [Video_Path] [nvarchar](maxNULL,  
  5.  CONSTRAINT [PK_Videos] PRIMARY KEY CLUSTERED   
  6. (  
  7.     [ID] ASC  
  8. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ONON [PRIMARY]  
  9. ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]  
  10.   
  11. GO  
  12.   
  13. CREATE procedure [dbo].[spInsertVideo]  
  14. (  
  15. @Name nvarchar(50),  
  16. @Video_Path nvarchar(50)  
  17. )  
  18. as  
  19. begin  
  20. insert into Videos(Name,Video_Path)  
  21. values(@Name,@Video_Path)  
  22. end  

Step 2

Create an empty project in Visual Studio. Double click on webconfig file and add connect.

 

  1. <connectionStrings>  
  2.   <add name="DBCS" connectionString="data source=FARHAN\SQLEXPRESS; database=simpleDB; integrated security=true;"/>  
  3. </connectionStrings>  

 

Add the below line of code to allow up to 50MB file upload.

 

  1. <httpRuntime executionTimeout="3600" maxRequestLength="51200" enable="true"/>  
  2. <system.webServer>  
  3.     <security>  
  4.       <requestFiltering>  
  5.         <requestLimits maxAllowedContentLength="104857600" />  
  6.       </requestFiltering>  
  7.     </security>  
  8.   </system.webServer>  

Step 3

Add web form by right clicking on project, adding new item,  choosing web form and giving it a name. Add script and style cdn link in web from the head section.

 

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  2.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  3.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
  4.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>  
  5.     <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" />  
  6.     <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>  
  7.     <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>  

Write script to apply Jquery data table with Gridview:

 

  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();  
  4.     });  
  5. </script>  

Step 4

Design HTML web form, drag and drop file upload control, button control, and grid view control, and use Bootstrap 4 class.

 

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div class="container py-3">  
  4.             <h2 class="text-center text-uppercase">How to upload video in database and play using asp.net</h2>  
  5.             <div class="row">  
  6.                 <div class="form-group">  
  7.                     <label>Choose Video:</label>  
  8.                     <div class="input-group">  
  9.                         <div class="custom-file">  
  10.                             <asp:FileUpload ID="FileUpload1" CssClass="custom-file-input" runat="server" />  
  11.                             <label class="custom-file-label"></label>  
  12.                         </div>  
  13.                         <div class="input-group-append">  
  14.                             <asp:Button ID="btnUpload" CssClass="btn btn-outline-secondary" runat="server" Text="Upload" OnClick="btnUpload_Click" />  
  15.                         </div>  
  16.                     </div>  
  17.                 </div>  
  18.             </div>  
  19.             <asp:Label ID="lblMessage" runat="server"></asp:Label>  
  20.             <asp:GridView ID="GridView1" ShowHeaderWhenEmpty="true" HeaderStyle-CssClass="bg-primary text-white" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered">  
  21.                 <EmptyDataTemplate>  
  22.                     <div class="text-center">No Data Found <strong>Upload New Video</strong></div>  
  23.                 </EmptyDataTemplate>  
  24.                 <Columns>  
  25.                     <asp:BoundField HeaderText="ID" DataField="ID" />  
  26.                     <asp:BoundField HeaderText="Name" DataField="Name" />  
  27.                     <asp:TemplateField HeaderText="Videos">  
  28.                         <ItemTemplate>  
  29.                             <video width="130" height="130" controls>  
  30.                                 <source src='<%#Eval("Video_Path")%>' type="video/mp4">  
  31.                             </video>  
  32.                         </ItemTemplate>  
  33.                     </asp:TemplateField>  
  34.                 </Columns>  
  35.             </asp:GridView>  
  36.         </div>  
  37.     </form>  
  38. </body>   
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();  
  4.     });  
  5. </script>  

 

Step 5

Double click on upload button and write the following code:

 

  1. using System;  
  2. using System.IO;  
  3. using System.Data;  
  4. using System.Data.SqlClient;  
  5. using System.Configuration;  
  6.   
  7. namespace UploadVideo_Demo  
  8. {  
  9.     public partial class UploadVideo : System.Web.UI.Page  
  10.     {  
  11.         protected void Page_Load(object sender, EventArgs e)  
  12.         {  
  13.             if (!IsPostBack)  
  14.             {  
  15.                 BindGrid();  
  16.             }  
  17.         }  
  18.   
  19.         private void BindGrid()  
  20.         {  
  21.             string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  22.             using (SqlConnection con = new SqlConnection(CS))  
  23.             {  
  24.                 SqlCommand cmd = new SqlCommand("spGetAllVideos", con);  
  25.                 cmd.CommandType = CommandType.StoredProcedure;  
  26.                 con.Open();  
  27.                 GridView1.DataSource = cmd.ExecuteReader();  
  28.                 GridView1.DataBind();  
  29.             }  
  30.         }  
  31.   
  32.         protected void btnUpload_Click(object sender, EventArgs e)  
  33.         {  
  34.             if (FileUpload1.PostedFile!=null)  
  35.             {  
  36.                 try  
  37.                 {  
  38.                     string FileName = Path.GetFileName(FileUpload1.PostedFile.FileName);  
  39.                     FileUpload1.PostedFile.SaveAs(Server.MapPath("UploadVideos/" + FileName));  
  40.   
  41.                     string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;  
  42.                     using (SqlConnection con = new SqlConnection(CS))  
  43.                     {  
  44.                         SqlCommand cmd = new SqlCommand("spInsertVideo", con);  
  45.                         cmd.CommandType = CommandType.StoredProcedure;  
  46.                         con.Open();  
  47.                         cmd.Parameters.AddWithValue("@Name",FileName);  
  48.                         cmd.Parameters.AddWithValue("@Video_Path""UploadVideos/" + FileName);  
  49.                         cmd.ExecuteNonQuery();  
  50.                         BindGrid();  
  51.                         lblMessage.Text = "Your file uploaded successfully";  
  52.                         lblMessage.ForeColor = System.Drawing.Color.Green;  
  53.                     }  
  54.                 }  
  55.                 catch (Exception)  
  56.                 {  
  57.                     lblMessage.Text = "Your file not uploaded";  
  58.                     lblMessage.ForeColor = System.Drawing.Color.Red;  
  59.                 }  
  60.             }  
  61.         }  
  62.     }  
  63. }  

 

Step 6

Run project ctr+F5

Final output

Screenshot 1

ASP.NETScreenshot 2

ASP.NETScreenshot 3

ASP.NET