Post
Ask Question

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

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](max) NULL,  
  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 = ON) ON [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


Similar Articles