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

Introduction

In this article, we are going to discuss how to upload an audio file in our project folder and save its path in SQL server database table. We will dynamically bind SQL table with the gridview control and display all uploaded audio files. In the gridview control, we have HTML5 audio element with controls play, volume and download options. We will have jQuery data table applied in gridview control for search, sort and paging.

Step 1

Create a database in the SQL server of your choice.

CREATE TABLE [dbo].[AudioList](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NULL,
[Audio_Path] [nvarchar](max) NULL,
CONSTRAINT [PK_AudioList] PRIMARY KEY CLUSTERED
(
[ID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
GO
CREATE procedure [dbo].[spInsertAudio]
(
@Name nvarchar(50),
@Audio_Path nvarchar(50)
)
as
begin
insert into AudioList(Name,Audio_Path)
values(@Name,@Audio_Path)
end
CREATE procedure [dbo].[spGetAllAudio]
as
begin
select ID,Name,Audio_Path from AudioList
end

Step 2

Create an empty web project in the visual studio of your choice. Give a meaningful name. Double click on web config file and add a database connection.

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

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

<httpRuntime executionTimeout="3600" maxRequestLength="51200" enable="true"/>
<system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="104857600" />
</requestFiltering>
</security>
</system.webServer>

Step 3

Add web form, right click on project, add new item, choose web form, give name. Add script and style cdn link in head section of web form.

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

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

Step 4

Design web form by dragging and dropping textbox control, button control, gridview control, control and label control. Apply Bootstrap 4 class for respective control. Right click on the project and create a folder with name UploadAudio to upload audio files.

<body>
<form id="form1" runat="server">
<div class="container py-3">
<h2 class="text-center text-uppercase">How to upload audio in database and play using asp.net</h2>
<div class="card" style="margin-bottom: 10px;">
<div class="card-header bg-primary text-white">
<h5>Upload Audio</h5>
</div>
<div class="card-body">
<button type="button" class="btn btn-primary btn-sm rounded-0" data-toggle="modal" data-target="#myAudio">
<i class="fa fa-plus-circle"></i>Add New
</button>
<div class="modal fade" id="myAudio">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Audio</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Choose Audio:</label>
<div class="input-group">
<div class="custom-file">
<asp:FileUpload ID="FileUpload1" CssClass="custom-file-input" runat="server" />
<label class="custom-file-label"></label>
</div>
<div class="input-group-append">
<asp:Button ID="btnUpload" CssClass="btn btn-outline-secondary" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</div>
</div>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<asp:GridView ID="GridView1" ShowHeaderWhenEmpty="true" HeaderStyle-CssClass="bg-primary text-white" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered">
<EmptyDataTemplate>
<div class="text-center">No Data Found <strong>Upload New Audio</strong></div>
</EmptyDataTemplate>
<Columns>
<asp:BoundField HeaderText="ID" DataField="ID" />
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:BoundField HeaderText="Audio" DataField="Audio_Path" />
<asp:TemplateField HeaderText="Play">
<ItemTemplate>
<audio controls>
<source src='<%#Eval("Audio_Path")%>' type="audio/ogg">
</audio>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>

COMPLETE HTML CODE FOR WEB FORM

<!DOCTYPE html>
<html>
<head runat="server">
<title>Upload Audio</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container py-3">
<h2 class="text-center text-uppercase">How to upload audio in database and play using asp.net</h2>
<div class="card" style="margin-bottom: 10px;">
<div class="card-header bg-primary text-white">
<h5>Upload Audio</h5>
</div>
<div class="card-body">
<button type="button" class="btn btn-primary btn-sm rounded-0" data-toggle="modal" data-target="#myAudio">
<i class="fa fa-plus-circle"></i>Add New
</button>
<div class="modal fade" id="myAudio">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Audio</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Choose Audio:</label>
<div class="input-group">
<div class="custom-file">
<asp:FileUpload ID="FileUpload1" CssClass="custom-file-input" runat="server" />
<label class="custom-file-label"></label>
</div>
<div class="input-group-append">
<asp:Button ID="btnUpload" CssClass="btn btn-outline-secondary" runat="server" Text="Upload" OnClick="btnUpload_Click" />
</div>
</div>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<asp:GridView ID="GridView1" ShowHeaderWhenEmpty="true" HeaderStyle-CssClass="bg-primary text-white" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered">
<EmptyDataTemplate>
<div class="text-center">No Data Found <strong>Upload New Audio</strong></div>
</EmptyDataTemplate>
<Columns>
<asp:BoundField HeaderText="ID" DataField="ID" />
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:BoundField HeaderText="Audio" DataField="Audio_Path" />
<asp:TemplateField HeaderText="Play">
<ItemTemplate>
<audio controls>
<source src='<%#Eval("Audio_Path")%>' type="audio/ogg">
</audio>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>

Step 5

Double click on upload button and write the following code.

using System;
using System.IO;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
namespace UploadAudio_Demo
{
public partial class UploadAudioFile : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
private void BindGrid()
{
string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("spGetAllAudio", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
GridView1.DataSource = cmd.ExecuteReader();
GridView1.DataBind();
}
}
protected void btnUpload_Click(object sender, EventArgs e)
{
if (FileUpload1.PostedFile != null)
{
try
{
string FileName = Path.GetFileName(FileUpload1.PostedFile.FileName);
FileUpload1.PostedFile.SaveAs(Server.MapPath("UploadAudio/" + FileName));
string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlCommand cmd = new SqlCommand("spInsertAudio", con);
cmd.CommandType = CommandType.StoredProcedure;
con.Open();
cmd.Parameters.AddWithValue("@Name", FileName);
cmd.Parameters.AddWithValue("@Audio_Path", "UploadAudio/" + FileName);
cmd.ExecuteNonQuery();
BindGrid();
lblMessage.Text = "Your file uploaded successfully";
lblMessage.ForeColor = System.Drawing.Color.Green;
}
}
catch (Exception)
{
lblMessage.Text = "Your file not uploaded";
lblMessage.ForeColor = System.Drawing.Color.Red;
}
}
}
}
}

Step 6

Run project ctr+F5

Final output:

Screenshot-1

Screenshot-2

Screenshot-3

Screenshot-4

Summary

In this article, we have learned how to upload an audio file in the folder and save path in SQL database. We have displayed all uploaded files in ASP.net gridview control. We have also applied jQuery datatable functionality in gridview like search, sort and paging. We have used the HMTL5 audio element to play the audio file.

13 Comments

Join the conversation! Your thoughts help the community grow.

Sonu Singh6y ago
Thanku so much sir,its working
Surajit Santra8y ago
Sir, can you share code for audio recording in MVC using JS/jQuery plugins?
Anurag Dixit8y ago
Audio Not Playing Farhan.
- Anurag Dixit8y ago
  It's working thank you Farhan !!
Surajit Santra8y ago
Wah ! Nice article. Thank you sir
- Farhan Ahmed8y ago
  Thank you..........
Bala S8y ago
Good to know this, thanks for sharing.
- Farhan Ahmed8y ago
  Thank you................
Rafnas T P8y ago
If you can give your solution as an attachment that will be great.
- Farhan Ahmed8y ago
  I tried to upload zip file but it's more than upload limit
- Rafnas T P8y ago
  Then leave it, I have posted in an idea session about that problem.
Rafnas T P8y ago
Wow, that's just amazing keep sharing..
- Farhan Ahmed8y ago
  Thank you so much for your comment