Uploading Image to a Folder and Display the Image after Upload

Vinz' Blog (ProudMonkey) "Code, Beer and Music ~ my way of being a programmer"

<< Highlight Row in GridView with Colored Columns | Home | Displaying All Images from the Folder in the Page >>

Uploading Image to a Folder and Display the Image after Upload

I wrote a series of blog posts awhile back before that demonstrates the following:

In this post I'm going to demonstrate how to upload image to a specified folder within the root of the web application and display the image right away in the Image control after uploading. To get started lets go ahead and fire up Visual Studio and create a new Website/Web Application project. After that create a folder under the root application for storing the uploaded images. The folder structure would look something like this below:

Solution
-Application Name
-AppCode
-AppData
-ImageStorage - //we will save the images in this folder
-Default.aspx
-web.config

Now lets design our WebForm. For the simplicity of this demo, I just set up the form like below:

ASPX:

   1:      <asp:FileUpload ID="FileUpload1" runat="server" />

   2:      <asp:Button ID="Button1" runat="server" Text="Upload" onclick="Button1_Click"/>

   3:      <br />

   4:      <asp:Image ID="Image1" runat="server" />

And here's the code for uploading the image to a folder.

CODE BEHIND:

   1:  protected void Button1_Click(object sender, EventArgs e) {

   2:              StartUpLoad();

   3:          }

4:

   5:          private void StartUpLoad() {

   6:              //get the file name of the posted image

   7:              string imgName = FileUpload1.FileName;

   8:              //sets the image path

   9:              string imgPath = "ImageStorage/" + imgName;

  10:              //get the size in bytes that

11:

  12:              int imgSize = FileUpload1.PostedFile.ContentLength;

13:

  14:              //validates the posted file before saving

  15:              if (FileUpload1.PostedFile != null && FileUpload1.PostedFile.FileName != "") {

  16:                  // 10240 KB means 10MB, You can change the value based on your requirement

  17:                  if (FileUpload1.PostedFile.ContentLength > 10240) {

  18:                      Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Alert", "alert('File is too big.')", true);

  19:                  }

  20:                  else {

  21:                      //then save it to the Folder

  22:                      FileUpload1.SaveAs(Server.MapPath(imgPath));

  23:                      Image1.ImageUrl = "~/" + imgPath;

  24:                      Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Alert", "alert('Image saved!')", true);

  25:                  }

26:

  27:              }

  28:          }

As you can see the code above is very straight forward and self explanatory. Here are the sample screen shots of the output:

On initial load:

Browsing an image:

After uploading:

That's it! I hope someone find this post useful!

Technorati Tags: ASP.NET,C#,Image Uploading

Posted on Thursday, January 20, 2011 10:29 PM ASP.NET , C# | Back to top

Comments on this post: Uploading Image to a Folder and Display the Image after Upload