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]
  11. GO
  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;
  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. }
  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. }
  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));
  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