Hello Everyone,
I am having an issue maintaining a displayed image in Asp.net Webforms application after a postback. Basically, my application contains a CreateEmployee page where administrators can choose a profile image of an employee and fill out all the other necessary details.The image in the image control is displayed via a generic handler -for the preview of the image before uploading. There are other controls, such as a dropdownlist that causes a postback, which in turn causes the displayed image to dissapear. The relevant code is listed below:
The fileupload control (AsyncUpload -ajaxcontroltoolkit):
<ajaxToolkit:AsyncFileUpload ID="fUploadProfilePic"
runat="server"
/>
//The javascript to display the image
function getRandomNumber() {
var randomNumber = Math.random(10000);
return randomNumber;
}
function onFileUploadProfilePic(sender, args) {
var handlerPage = '<%= Page.ResolveClientUrl("~/Handlers/ImageHandler.ashx")%>';
var queryString = '?randomno=' + getRandomNumber();
var src = handlerPage + queryString;
var clientID = '<%= imgProfilePic.ClientID%>';
document.getElementById(clientID).setAttribute("src", src);
}
// The event handler for fileupload uploaded complete event.
EDIT: This event handler is called twice. During the process, the data (byte[]) in the second run has all it's indexes converted to 0...[0]=0,[1]=0,[2]=0...etc. I want to know why this is happening as the 'HttpPostedFile' passed to the ReadFile method is still legit.
protected void fUploadProfilePic_UploadedComplete(object sender,
AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if(fUploadProfilePic.PostedFile!=null)
{
HttpPostedFile file = fUploadProfilePic.PostedFile;
byte[] data = Utilities.ImageUtil.ReadFile(file);
Session[EmployeeBLL.STORED_IMAGE] = data;
}
}
//The ImageHandler.ashx code
public void ProcessRequest(HttpContext context)
{
context.Response.Clear();
if(context.Session[EmployeeBLL.STORED_IMAGE]!=null)
{
var storedImage = context.Session[EmployeeBLL.STORED_IMAGE] as byte[];
if(storedImage!=null)
{
System.Drawing.Image image = GetImage(storedImage);
if(image!=null)
{
context.Response.ContentType = "image/jpeg";
image.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);
}
}
}
}
private System.Drawing.Image GetImage(byte[] image)
{
var stream = new MemoryStream(image);
return System.Drawing.Image.FromStream(stream);
}
When debugging the code, i noticed that the eventhandler is executed twice. In the second run, the byte[] data's content is all 0's -i.e the following section:
byte[] data = Utilities.ImageUtil.ReadFile(file);
Session[EmployeeBLL.STORED_IMAGE] = data;
I am not sure what is causing this behavior. This might also be the reason why the image is not displaying. The ReadFile definition is as follows:
public static byte[] ReadFile(HttpPostedFile file)
{
byte[] data = new Byte[file.ContentLength];
file.InputStream.Read(data, 0, file.ContentLength);
return data;
}
//Finally,
//The page_load code for maintaining the state of the fileupload control
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
initializeComponents();
if (Session["fUpload"] == null && fUploadProfilePic.HasFile)
Session["fUpload"] = fUploadProfilePic;
else if (Session["fUpload"] != null && (!fUploadProfilePic.HasFile))
fUploadProfilePic = (AsyncFileUpload)Session["fUpload"];
else if (fUploadProfilePic.HasFile)
Session["fUpload"] = fUploadProfilePic;
}
Can someone please assist in pointing out the error?