How to save images in a website Folder and display it in Gridview control

Hi friend, Here i will show you "How to save image in a website's Folder and display it in gridview control". If you working on any project then you will need to display the images in gridview control.Today ,I will show you, how to display an image in gridview control easily. You just learn the concepts and use it in your projects. Here any user can upload your image from your system (computer) and save it on your website folder (eg. msdotnet_images) but the Image size should be less than equal to 50 KB. If you will upload image size more than 50 KB then it will show an error message on the web page. Here all the images name and path will be stored in sql server database (eg. Database.mdf) separately .You can easily show the images in Grid view control with the help of the image path stored in database. In our previous tutorials ,i have already performed some operations in Gridview, DataList and Repeater controls .You can learn lots of concepts from the below links.

Here i have used Exception handling concepts also in this application.You already know the benefits of exception handling.If any problem in Exception handling ,you can ask me. This is very important concepts in asp.net . You can use this application concepts some other places also like:

How to create image gallery in asp.net application.
How to use folder image in your dynamic web page.

You can follow below link if you want to make a form filling application in asp.net.

How to make a form filling application in asp.net using c#

There are some steps to implement this concepts in your asp.net application as given below:-
Step 1 :- First open your visual studio --> File --> New --> Website --> Select ASP.NET Empty website -->OK --> Open Solution Explorer --> Add a new web form (default.aspx)--> > Drag and Drop Lable , FileUpload ,SqlDataSource ,Gridview and Button controls on the page from toolbox as show below:-

Step 2 :- Now add Database.mdf file on your website -->Create a table (student) with following column(image_id,image_name,image_path) as shown below:-

Note:- If you are facing problems to add .mdf database file on website then follow below links:-

Step 3 :- Create a New Folder (msdotnet_images) in your Solution Explorer as shown below:-

Step 4 :- Now Configure your SqlDataSource's settings -->Now select Database.mdf --> and proceed with Next Button as shown below:-

Note:- If you don't want to configure SqlDatasource then add following connection string codes in web.config file manually.But when you will configure it then this codes will be inserted automatically in web.config file.

<connectionStrings> <add name="image_ConnectionString" connectionString="Data Source=.;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient" /> </connectionStrings>

Step 5 :- Now Write the C# codes on button clicks as given below:-


using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.IO;

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

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["image_ConnectionString"].ConnectionString);
        con.Open();
        try
        {
            // get file name
            string file_name = Path.GetFileName(FileUpload1.PostedFile.FileName);
            //Check whether image size 51200 byte or 50 kb  
            long size_img = FileUpload1.PostedFile.InputStream.Length;
            if (size_img <= 51200)
            {
                //save the images in msdotnet_images path folder
                FileUpload1.SaveAs(Server.MapPath("msdotnet_images/" + file_name));
                Label1.Text = "Image successfully added in msdotnet_images folder";
                // Now Save the file name and image path in sql database 
           SqlCommand cmd = new SqlCommand("insert into student values(@name,@path)", con);
                cmd.Parameters.AddWithValue("name", file_name);
                cmd.Parameters.AddWithValue("path", "msdotnet_images/" + file_name);
                cmd.ExecuteNonQuery();
                Label1.Text = "Image name and path inserted in database successfully ";
                Response.Redirect("default.aspx");
            }
            else
            {
                Label1.Text = "Please Upload image size less than equal to 50 kB ";
            }       
        }
        catch (Exception ex)
        {
            Label1.Text = ex.Message;
        }
        finally
        {
            con.Close();
        }    
    }
}

Step 6 :- Now Bind the Sql database values with Gridview control --> open the Source code and write the following c# codes for Grid view as given below:-


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataSourceID="SqlDataSource1" Width="340px" Height="178px">
        <Columns>
       <asp:BoundField DataField="image_id" HeaderText="ID" />
      <asp:BoundField DataField="image_name" HeaderText="ImageName" />
      <asp:ImageField HeaderText="Image" DataImageUrlField="image_path" />
      </Columns>
 </asp:GridView>

Step 7 :- Now Run the application (press F5) --> Now Browse the image from system --> Press Save image in Folder Button --> You will see the following output:-