ASP.NET WebForms: Uploading, Validating And Displaying Images

In this blog you will learn how to upload and validate and Display Images in ASP.NET Web Forms.

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 an 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 let's 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 should look something like this below:

Solution

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

For the simplicity of this demo, I just set up the HTML form like below:

  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.  
  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.                  }  else {  
  20.                            //then save it to the Folder  
  21.                            FileUpload1.SaveAs(Server.MapPath(imgPath));  
  22.                            Image1.ImageUrl = "~/" + imgPath;  
  23.                            Page.ClientScript.RegisterClientScriptBlock(typeof(Page), "Alert""alert('Image saved!')"true);  
  24.                 }  
  25.     
  26.           }  
  27. }  
That simple! Now you should be able to see the image in the page after uploading.