Introduction
Recently there are so many people asking in forums how to preview an uploaded image before saving it to
the database. In this article, let us see how to preview an uploaded image in ASP.NET before saving it to database.
Also this we will see how to feed a byte array into an image control. We are going to achieve this using an IhttpHandler
.
Using the code
- Create a new website. Add a
FileUpload
control, a button, and an image control. ASPX code:
<table>
<tr>
<td class="style3">
<asp:Label ID="Label1" runat="server" Text="Photo upload" />
</td>
<td class="style4">
<asp:FileUpload runat="server" ID="PhotoUpload" />
</td>
<td class="style4">
<asp:Button runat="server" ID="btnPhotoPreview" Text="Preview" />
</td>
<td class="style1">
<asp:Image runat="server" ID="ImagePreview" Height="164px" Width="125px" />
</td>
</tr>
</table>
- Now add a button click event for “
btnPhotopreview
”.
<asp:Button runat="server" OnClick="btnPreview_Click" ID="btnPhotoPreview" Text="Preview" />
- We have to add a handler class in order to show the image. We are going to pass
the session variable for
FileBytes
for the upload control. In the new handler class, get the session
variable and generate the image.
When we add the .ashx file, it will have some code inside it.
<%@ WebHandler Language="C#" Class="ImageHandler" %>
using System;
using System.Web;
public class ImageHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World");
}
public bool IsReusable {
get {
return false;
}
}
}
Just rewrite the code inside processrequest
to get the session variable and generate
the image.
In order to use the session variable in the HTTPHandler class we also implement our class from IRequiresSessionState
.
<%@ WebHandler Language="C#" Class="ImageHandler" %>
using System;
using System.Web;
public class ImageHandler : IHttpHandler, System.Web.SessionState.IRequiresSessionState
{
public void ProcessRequest (HttpContext context) {
if ((context.Session["ImageBytes"]) != null)
{
byte[] image = (byte[])(context.Session["ImageBytes"]);
context.Response.ContentType = "image/JPEG";
context.Response.BinaryWrite(image);
}
}
public bool IsReusable {
get {
return false;
}
}
}
- Now inside the button click in our page, get the file bytes from the
FileUpload
control and save it in
the session variable.
protected void btnPreview_Click(object sender, EventArgs e)
{
Session["ImageBytes"] = PhotoUpload.FileBytes;
ImagePreview.ImageUrl = "~/ImageHandler.ashx";
}
Now run the application and browse the image and preview it.
I have attached the complete source code also.
I graduated as Production Engineer and started my career as Software Developer then worked as tester for a while before moving into Windows application development using Microsoft Technologies. But for the last few years i am working on javascript, React, Node, AWS, Azure Chatbots