Save Images In A Folder In ASP.NET Using FileUpload Control

Nilesh Jadav

ASP.NET FileUpload ControlSave Images in FolderUse FileUpload Control

18 Comments

Join the conversation! Your thoughts help the community grow.

Dharmendra Kumar Pandit6y ago
Nice article .........
Aktham Mahmoud7y ago
Hi' am trying to use this method implemented by Details View control, but no way find solution to resolve a big problems
Arul R11y ago
Good one !!!
AbedElHamid AlWahidy11y ago
if i store pdf or doc file how can i retrieve it in data grid to downloaded
Santhakumar Munuswamy11y ago
Good one
- Nilesh Jadav11y ago
  Thank you Santhakumar Munuswamy
Gowtham K11y ago
Nice Share
- Nilesh Jadav11y ago
  Thank you Gowtham K
Gopi Chand11y ago
Well done Nilesh
- Nilesh Jadav11y ago
  Thank you Gopi Chand
Rakesh11y ago
Good share
- Nilesh Jadav11y ago
  Thank you Rakesh Chavda
Debendra Dash11y ago
good one nilesh....
- Nilesh Jadav11y ago
  Thank you Debendra Dash
Sujeet Suman11y ago
Nice Article.....................
- Nilesh Jadav11y ago
  Thank you Sujeet Suman
Mukesh Kumar11y ago
Nice Article Sir.. Thanks for sharing
- Nilesh Jadav11y ago
  Thank you Mukesh Kumar

Initial chamber

Step 1: Open Visual Studio 2010 and create an empty website. Give it a suitable name: FileUpload_demo.

Step 2: In Solution Explorer you will get your empty website. Add a web form by following these steps:

For Web Form:

Step 3: FileUpload_demo (Your Empty Website) - Right Click, Add New Item, then Web Form. Name it Fileupload_demo.aspx.

Again get back to your website in Solution Explorer and Add New Folder and give a name [New Folder, then Images].

default page

Design chamber

Step 4: Open Fileupload_demo.aspx file to create our design, we will drag an HTML table, three FileUpload controls, three buttons and three labels.

Fileupload_demo.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.style1
{
width: 281px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%;">
<tr>
<td class="style1">
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td class="style1">
<asp:FileUpload ID="FileUpload1" runat="server" Width="211px" />
</td>
<td>
<asp:FileUpload ID="FileUpload2" runat="server" />
</td>
<td>
<asp:FileUpload ID="FileUpload3" runat="server" />
</td>
</tr>
<tr>
<td class="style1">
<asp:Label ID="Label1" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label2" runat="server"></asp:Label>
</td>
<td>
<asp:Label ID="Label3" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="style1">
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Upload" />
</td>
<td>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="Upload" />
</td>
<td>
<asp:Button ID="Button3" runat="server" onclick="Button3_Click" Text="Upload" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>

Your design looks like the following image:

Design

Code chamber

Step 5: Open Fileupload_demo.aspx.cs file to write the following code for our three FileUpload controls.

Fileupload_demo.aspx.cs

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;
using System.Data;
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)
{
if (FileUpload1.HasFile)
{
FileUpload1.SaveAs(Server.MapPath("images//" + FileUpload1.FileName));
Label1.Text = "Image Uploaded";
Label1.ForeColor = System.Drawing.Color.ForestGreen;
}
else
{
Label1.Text = "Please Select your file";
Label1.ForeColor = System.Drawing.Color.Red;
}
}
protected void Button2_Click(object sender, EventArgs e)
{
if (FileUpload2.HasFile)
{
string fileName = Path.Combine(Server.MapPath("~/images"), FileUpload2.FileName);
FileUpload2.SaveAs(fileName);
Label2.Text = "Image Uploaded";
Label2.ForeColor = System.Drawing.Color.ForestGreen;
}
else
{
Label2.Text = "Please Select your file";
Label2.ForeColor = System.Drawing.Color.Red;
}
}
protected void Button3_Click(object sender, EventArgs e)
{
if (FileUpload3.HasFile)
{
string fileName = Path.GetFileName(FileUpload3.PostedFile.FileName);
FileUpload3.PostedFile.SaveAs(Server.MapPath("~/images/") + fileName);
Label3.Text = "Image Uploaded";
Label3.ForeColor = System.Drawing.Color.ForestGreen;
}
else
{
Label3.Text = "Please Select your file";
Label3.ForeColor = System.Drawing.Color.Red;
}
}
}

Output chamber

Output

Now check this image in the images folder in the Solution Explorer or in our project.

You can check out all other FileUpload controls that they are working or not.