Load and Preview Image using File upload Control

In this article I am going to explain how we can use file upload control in asp.net. I will be designing a small web application to explain the whole scenario.

One of the important thing is the decision of storage medium; it can be file system or database in the form of binary large objects. In this example I have created a sub directory inside the web application directory and we are uploading our files and images.

So let's begin:

First we need to create the sub directory in the web application directory. I have created sub directory by the name "images". Below is the screen shot:

Note: As I am working on localhost and using asp.net development server so location of my web application is –"F:\programs\dot net" and not IIS and name of my web application is "blog-webapp". Therefore, the image directory goes into this is "blog-webapp" folder thereby making the location "F:\programs\dot net\blog-webapp".

Below is the web form:

Here is the aspx code for the above screen shot.

<%@ 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 id="Head1" runat="server">

<title></title>

<style type="text/css">

.style1

{

font-size: x-large;

font-weight: bold;

text-align: center;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div class="style1">

 

DEV TECHIE <br />

</div>

 

<div><br /></div>

<div>

&nbsp; Picture&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

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

</div>

 

<div><br /></div>

 

<div style="width: 286px">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<asp:Label ID="Label1" runat="server"></asp:Label>

</div>

 

<div><br /></div>

 

<div style="text-align:center; width: 289px;" >

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

</div>

 

<div style="width: 387px; height: 211px; position: relative; top: -107px; left: 339px">

<asp:Image ID="Image1" runat="server" Height="202px" Width="377px" />

</div>

 

<div><br /></div>

</form>

</body>

</html>

As shown in above As shown in snapshot above, as soon as you would click on browse button a window will appear in your screen for you to choose any file from. Click on submit button and file would get copied into sub directory "images".

Code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.IO;

 

public partial class _Default : System.Web.UI.Page

{

public string fileuploadfile;

public string picpath;

 

protected void Page_Load(object sender, EventArgs e)

{

 

}

 

//******************Submit********************************

protected void Button1_Click(object sender, EventArgs e)

{

if (FileUpload1.HasFile)

try

{

var scheme = Request.Url.Scheme; // will get http, https, etc.

var host = Request.Url.Host; // will get www.mywebsite.com

var port = Request.Url.Port; // will get the port

var path = Request.Url.AbsolutePath;

picpath = scheme.ToString() + "://" + host.ToString() + ":" + port.ToString() + Request.ApplicationPath + "/" + "images/";

 

FileUpload1.SaveAs("F:\\programs\\dot net\\blog-webapp\\images\\" + FileUpload1.FileName);

//****Below is additional information you want you can display it in label***

 

//Label1.Text = "File name: " +

// FileUpload1.PostedFile.FileName + "<br>" +

// FileUpload1.PostedFile.ContentLength + " kb<br>" +

// "Content type: " +

// FileUpload1.PostedFile.ContentType;

Label1.Text = picpath + FileUpload1.FileName;

fileuploadfile = FileUpload1.FileName;

Image1.ImageUrl = picpath + fileuploadfile;

 

}

catch (Exception ex)

{

Label1.Text = "ERROR: " + ex.Message.ToString();

}

else

{

Label1.Text = "You have not specified a file.";

}

}

}

NOTE:

FileUpload1.SaveAs – this method is mainly responsible for uploading the file.

FileUpload1.HasFile- check whether fileupload has any file or not.

FileUpload1.FileName- this method gives us the filename example –" monsoon-027.jpg".

 

After picture is uploaded it will be displayed as below. If you want to check whether the file is uploaded or not you can check it by visiting the sub directory folder which in my case is- "F:\programs\dot net\blog-webapp\images"