Server Intellect
 
Home   Asp.Net Tutorials   What's New   Newsletter   More Resources
 
 
  Categories
Advanced Technologies
AJAX
Internet Browsers
Controls
Database
Email
Error Handling
File
Graphics
Website Navigation
Network
Performance
User Interface and Themes
Validation
Visual Web Developer
Web Services
XML
Suggest Tutorial


Navigator: Home - Tutorials - File - Upload with Thumbnail Generator in ASP.NET and C#
Upload with Thumbnail Generator in ASP.NET and C#


ASP.NET File Tutorial

This tutorial will show how we use the FileUpload Control to upload a file to the website, whilst simultaneously creating a thumbnail of the image, and saving that too. C# version.

Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

In this tutorial, we will create a single file upload form and a GridView to display the list of uploaded files.
The upload form will upload a single file at a time, when the user click the button, and it will also create a thumbnail of the image, saving both images to the uploads folder.
First, we add the controls to the ASPX page (FileUpload, Button, and GridView):

<form id="form1" runat="server">
<div>
<table style="width: 90%">
<tr>
<td style="width: 50%">
File Upload with Thumbnail Generator:<br />
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Button ID="buttonUpload" runat="server" Text="Upload" OnClick="buttonUpload_Click" /><br />
</td>
<td style="width: 50%">
<asp:GridView ID="UploadedFiles" DataSource="<%# GetUploadList() %>" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" OnRowDeleting="UploadedFiles_RowDeleting" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderText="File">
<ItemStyle Width="100%" />
<ItemTemplate>
<asp:HyperLink
ID="FileLink"
NavigateUrl='<%# "~/Uploads/" + Container.DataItem.ToString() %>'
Text='<%# Container.DataItem.ToString() %>'
runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType="Image" DeleteImageUrl="~/media/delete.gif" ShowDeleteButton="True">
<ItemStyle Width="1px" />
</asp:CommandField>
</Columns>
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<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>
</div>
</form>

The GetUploadList() function will retrieve a list of filenames in the uploads directory, and then insert them into an array. The function returns an array of all the filenames in the upload folder.
The buttonUpload_click event first checks to see if the file exists; if it does not, then it saves it to the uploads directory. Then the image is analyzed (height & width), and then resized to 128px. Finally, the thumbnail is created and saved to the uploads directory with "_th" added to the end of the filename, and the GridView is updated.
The UploadedFiles_RowDeleting function allows the user to delete any file in the GridView by simply clicking the icon.
The code-behind will look something like this:

using System;
using System.Collections;
using System.Collections.Specialized;
using System.Configuration;
using System.Text;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Caching;
using System.Web.SessionState;
using System.Web.Security;
using System.Web.Profile;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.IO;

partial class _Default : System.Web.UI.Page
{
override protected void OnInit(EventArgs e)
{

}

override protected void OnLoad(System.EventArgs e)
{
base.OnLoad(e);
if (! IsPostBack)
{
UploadedFiles.DataBind();
}
}

protected string[] GetUploadList()
{
string folder = Server.MapPath("~/Uploads");
string[] files = Directory.GetFiles(folder);
string[] fileNames = new string[files.Length];
Array.Sort(files);

for (int i = 0; i < files.Length; i++)
{
fileNames[i] = Path.GetFileName(files[i]);
}

return fileNames;
}

protected void buttonUpload_Click(object sender, System.EventArgs e)
{
System.Drawing.Image image = System.Drawing.Image.FromStream(FileUpload1.PostedFile.InputStream);

string fileName = Path.Combine(Server.MapPath("~/uploads"), FileUpload1.FileName);
if (File.Exists(fileName))
File.Delete(fileName);
image.Save(fileName);

float imgWidth = image.PhysicalDimension.Width;
float imgHeight = image.PhysicalDimension.Height;
float imgSize = imgHeight > imgWidth ? imgHeight : imgWidth;
float imgResize = imgSize <= 128 ? (float)1.0 : 128 / imgSize;
imgWidth *= imgResize; imgHeight *= imgResize;
System.Drawing.Image thumb = image.GetThumbnailImage((int)imgWidth, (int)imgHeight, delegate() { return false; }, (IntPtr)0);

fileName = Path.Combine(
Server.MapPath("~/uploads"),
string.Format("{0}_th{1}",
Path.GetFileNameWithoutExtension(FileUpload1.FileName),
Path.GetExtension(FileUpload1.FileName)
)
);
if (File.Exists(fileName))
File.Delete(fileName);

thumb.Save(fileName);

UploadedFiles.DataBind();
}
protected void UploadedFiles_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
e.Cancel = true;
string fileName = ((HyperLink)UploadedFiles.Rows[e.RowIndex].FindControl("FileLink")).Text;
fileName = Path.Combine(Server.MapPath("~/uploads"), fileName);
File.Delete(fileName);
UploadedFiles.DataBind();
}
}

Download the Full Working Version of this Project written with Visual Studio.NET C# 2005 Here!

Looking for the VB.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!







 
  Developer Resources







Server Intellect Rocks