Image preview before uploading using AsynFileUpload
|
|
It is always nice to show the preview of the image which has to be uploaded by the user.
After lot of searching I found that the HTML upload i.e input type="file"... is not useful as it does not expose enough server side events. For this scenario the better control is Ajax control ToolKit's AjaxFileUpload, which has enough server side events and client side events.
After the file is uploaded instead of saving it in the location in the server instead HttpHandler can be used which can write the uploaded image directly into the response. so no storage and less headaches.
What have been done.
1) Use AjaxFileUpload to upload the file.
2) Store the file in the session object.
3) Use the session object in the Handler. Set the Image control source to the Handler.
In .aspx.cs
public static readonly string STORED_IMAGE = "SessionImage";
protected void OnAsyncFileUploadComplete(object sender, AsyncFileUploadEventArgs e)
{
if (asyncFileUpload.PostedFile != null)
{
HttpPostedFile file = asyncFileUpload.PostedFile;
byte[] data = ReadFile(file);
//Store the image in the session.
Session[STORED_IMAGE] = data;
}
}
private byte[] ReadFile(HttpPostedFile file)
{
byte[] data = new Byte[file.ContentLength];
file.InputStream.Read(data, 0, file.ContentLength);
return data;
}
In .aspx
Note: Use the randomnumber in the querystring of the handler otherwise, browser caches the first image and returns the same image again and again.
<script language="javascript" type="text/javascript">
function getRandomNumber() {
var randomnumber = Math.random(10000);
return randomnumber;
}
function OnClientAsyncFileUploadComplete(sender, args)
{
var handlerPage = '<%= Page.ResolveClientUrl("~/ImageHandler.ashx")%>';
var queryString = '?randomno=' + getRandomNumber();
var src = handlerPage + queryString;
var clientId = '<%=previewImage.ClientID %>';
document.getElementById(clientId).setAttribute("src", src);
}
</script>
The Handler
Note use the IRequiresSessionState to access the session variables in the Handler.
public class ImageRequestHandler: IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.Clear();
if(context.Request.QueryString.Count != 0)
{
//Get the stored image and write in the response.
var storedImage = context.Session[_Default.STORED_IMAGE] as byte[];
if (storedImage != null)
{
Image image = GetImage(storedImage);
if (image != null)
{
context.Response.ContentType = "image/jpeg";
image.Save(context.Response.OutputStream, ImageFormat.Jpeg);
}
}
}
}
private Image GetImage(byte[] storedImage)
{
var stream = new MemoryStream(storedImage);
return Image.FromStream(stream);
}
public bool IsReusable
{
get { return false; }
}
}
In web.config
<add validate="false" verb="*" path="ImageHandler.ashx"type="ImagePreviewDemo.ImageRequestHandler,ImagePreviewDemo"/>
Please find the full source code attached.
Attachments
Did you like this resource? Share it with your friends and show your love!
Categories: C#, ASP.NET, JQUERY
Post a Comment
Oops!
The words you entered did not match the given text. Please try again.
Oops!
Oops, you forgot something.