Uploading Files to a Database in ASP.NET and VB

Navigator : Home > Tutorials > Database Tutorials > ...

Uploading Files to a Database in ASP.NET and VB

This tutorial will show how we can upload files to a SQL database using ASP.NET and VB. In this tutorial, we will be using a FileUpload Control to allow uploading of files to a SQL database. For this example, the database has just one table and five columns:
id, name, img, type, and length.We add a FileUpload control, a button, a GridView and two SqlDataSources to the ASPX page:

<tr>

<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload to Database" /></td>

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="id" DataSourceID="ContentListDataSource" ForeColor="#333333" GridLines="None">

<asp:BoundField DataField="id" HeaderText="ID" ReadOnly="True" SortExpression="id" />
<asp:BoundField DataField="name" HeaderText="Name" SortExpression="name" />
<asp:BoundField DataField="type" HeaderText="Type" SortExpression="type" />
<asp:BoundField DataField="length" HeaderText="Length" SortExpression="length" />
<asp:CommandField ButtonType="Image" DeleteImageUrl="~/media/delete.gif" ShowDeleteButton="True">

</asp:CommandField>

</Columns>
<RowStyle BackColor="#EFF3FB" />
<EditRowStyle BackColor="#2461BF" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />

</asp:GridView>

</td>

</tr>

</table>
<asp:SqlDataSource ID="ContentDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM tblImages WHERE [name]=@name" InsertCommand="INSERT INTO tblImages([name],img,type,length) VALUES(@name,@img,@type,@length)" OnDeleting="ContentDataSource_Deleting" OnInserting="ContentDataSource_Inserting" SelectCommand="SELECT [name], type, length FROM tblImages">

<asp:Parameter Name="name" />

</DeleteParameters>
<InsertParameters>

<asp:Parameter Name="name" />
<asp:Parameter Name="img" />
<asp:Parameter Name="type" />
<asp:Parameter Name="length" />

</InsertParameters>

</asp:SqlDataSource>
<asp:SqlDataSource ID="ContentListDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" DeleteCommand="DELETE FROM tblImages WHERE id=@id" SelectCommand="SELECT id, [name], type, length FROM tblImages">

<asp:Parameter Name="id" />

</DeleteParameters>

</asp:SqlDataSource>
<br />

</div>
</form>

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

Note there are two SqlDataSources - one is for adding new files to the database, the other is for displaying (and deleting) files to (and from) the GridView.
Also note the CommandField, which allows deletion from the GridView.

In the code-behind, we can ask if the file already exists, and if it does, we will delete the existing file and then save the new one - effectively overwriting it. Then we bind the data to the GridView to update the display.
On the ContentDataSource_Inserting event, we set the values of the uploaded image to the column names of table within the database - inserting a new record.
Similarly, on the ContentDataSource_Deleting even, we delete the record from the database by name.
The code-behind should look something like this:

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

Imports Microsoft.VisualBasic
Imports System
Imports System.Data
Imports System.Configuration
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls

Partial Public Class _Default

Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)

If FileUpload1.HasFile Then

ContentDataSource.Delete()
ContentDataSource.Insert()
GridView1.DataBind()

End If

End Sub
Protected Sub ContentDataSource_Inserting(ByVal sender As Object, ByVal e As SqlDataSourceCommandEventArgs)

e.Command.Parameters("@name").Value = FileUpload1.FileName
e.Command.Parameters("@type").Value = FileUpload1.PostedFile.ContentType
e.Command.Parameters("@length").Value = FileUpload1.PostedFile.ContentLength
e.Command.Parameters("@img").Value = FileUpload1.FileBytes

End Sub
Protected Sub ContentDataSource_Deleting(ByVal sender As Object, ByVal e As SqlDataSourceCommandEventArgs)

e.Command.Parameters("@name").Value = FileUpload1.FileName

End Sub

End Class

The ConnectionString in Web.config should be something like this:

</connectionStrings>

If you're ever in the market for some great Windows web hosting, try Server Intellect. We have been very pleased with their services and most importantly, technical support.

Looking for the C#.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!

100% SPAM FREE! We will never sell or rent your email address!