How to upload images to SQL Server in ASP.NET Web Forms?

 In modern day websites, images are important in enhancing the user experience of websites. Whether it’s a profile picture of a user, product display image, or image gallery, the ability to upload images is a fundamental feature of any website. For web developers working with ASP.NET Web Forms with image uploading functionality is an essential task. This blog post will guide you through the steps of uploading images to SQL Server in an ASP.NET Web Forms application in a step-by-step approach.

First of all, setup the necessary environment including Visual Studio and SQL Server, followed by creating the database schema required to store images. You’ll learn how to design a front-end UI for uploading images, along with the server-side logic to handle the file uploads.

First of all, create a database called Students in SQL Server Management Studio, I am using SQL Server 20, you can use any version you like. Next step is to create a table with the fields ID, Title, Details and Photo fields as shown below.

Next, open Visual Studio and create an ASP.Net webform application with the design as shown below. The webform has a textbox with the id as TxtTitle, multiline textbox with an Id as TxtDetails, file uploader with an Id as FUImages, a button with the Id BtnUpload and a label with an Id of LblMessage to display messages. Furthermore, you need to create a folder named images in the solution explorer as shown below:

Finally, double click the submit button to open code-based C# file and write the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;



namespace UplaodImages
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void BtnUpload_Click(object sender, EventArgs e)
        {
            SqlConnection con = new SqlConnection("server=(localdb)\\MSSQLLocalDB;Database=students;Integrated Security=SSPI");
            con.Open();
            SqlCommand cmd = new SqlCommand("Insert into Posts (Title,Details,Photo) VALUES (@Title,@Details,@Photo)",con);
            cmd.Parameters.AddWithValue("@Title", TxtTitle.Text);
            cmd.Parameters.AddWithValue("@Details", TxtDetails.Text);
            string strImg = System.IO.Path.GetFileName(FUImages.PostedFile.FileName);
            cmd.Parameters.AddWithValue("@Photo", strImg);
            cmd.ExecuteNonQuery();
            LblMessage.Text = "File Uploaded Successfully";
            con.Close();
            FUImages.PostedFile.SaveAs(Server.MapPath("images\\") + strImg);
        }
    }
}

Finally, run the application, write title of the post, details of the post, click on file uploader to select an image and finally click on upload button, the details will get saved in the database and image will be uploaded in the images folder. 

Uploading images to SQL Server in an ASP.NET Web Forms application looks like difficult at first, but with a clear understanding of the process, it becomes easy to implement this functionality in asp. Net webform application. 

I hope this guide has provided you with the knowledge and confidence to implement this functionality in your own projects.

You can also watch the you tube video of this tutorial:

ASP.NET, SQL Server, Web Form