problem that I had, and there is really no working solution on the internet for
the Image Upload Preview, that is also readily available. I had to revisit Image
Upload Preview recently and ended up creating User Control for it. You can read
up on it and download a working solution here.
---
Recently I had to Preview and Upload images without doing a postback. Majority of solutions that I had found on the web - were crippled, as they worked only on local development servers, and as soon, as the application was moved to the hosting server, it stoped working. No wonder! For the preview to work - the image should be stored "locally" on the hosting server, and most of the solutions - just pulled the URI for image from file upload control and assumed that file was already loaded on the hosting server. It happened to be a wrong assumption!
To solve:
1) I put a hidden iFrame control on the page in order to upload the image file with the "background" postback;
2) Then displayed the uploaded image using Javascript.
ASP.NET code behind uploads the file and returns the file URI to the page for the preview.
Here's a step by step description on how I did it:
At first I added to the page an iFrame control embedded within DIV tag with display set to NONE.
< src="empty.htm" id="hiddenFrame" name="hiddenFrame">< /iframe >
Then attached javascript function to onChange event for the Upload control. All that function does - is reassigns action and target on the form and performs submit():
document.getElementById(form).action = "default.aspx?ImgPreview=true";
document.getElementById(form).target = frameName;
document.getElementById(form).submit();
And then restores the defaults:
document.getElementById("ProfileManager").action = "default.aspx";
document.getElementById("ProfileManager").target = "_self";
ImgPreview query string is passed to ASPX page on the postback, to indicate when to perform a file upload (as we are doing a postback to the same page, there's a need to distinguish image_upload_postback vs. normal_page_display_postback).
In the code behind for that page I put the following in the Page_Load routine
//Upload file on "hidden" postback
if (Page.Request.QueryString["ImgPreview"] != null)
{
DoFileUpload();
}
else
{
//do regular page_load routine
}
DoFileUpload() operates on imgUpload.PostedFile to upload file to the server. File extension, as well as file size verifications can be implemented within DoFileUpload() method.
To get full path to the place where to store file on the server:
//ImageUpload is web folder within the website
string path = Server.MapPath("ImageUpload/");
If upload successful I generate return string as follows:
result = "Result::ImageUpload/" + fileName;
Otherwise:
result = "Error::Unsupported file format (only *.jpeg, *.jpg, *.gif are allowed).";
Then, there are several ways to pass the result string back to the page. Either by using ASP.NET Session variable and Callbacks, or by simply calling Javascript function in parent window(relative to iframe).
Later is a much simpler way: just use Response.Write at the end of DoFileUpload() function to call javascript:
Response.Write("< type="'text/javascript'" language="'javascript'">");
Response.Write(String.Format("parent.FinishImagePreview('{0}');", result));
Response.Write("< /script >");
On the client side Javascript function FinishImageUpload() parses returned string and in case of success - it uses the path to preview the image, or displays an error otherwise.
Here's a listing for DoFileUpload():
protected void DoFileUpload()
{
byte[] buffer = null;
FileStream fs = null;
Bitmap bmp = null;
string result = "";
try
{
deletePreviewImageFromServer(); //delete any previously previewed images from the server
if (imgUpload.PostedFile != null)//make sure posted file is NOT null
{
if (imgUpload.PostedFile.FileName != null && imgUpload.PostedFile.FileName != "") //check for filename
{
string fileExtension = System.IO.Path.GetExtension(imgUpload.PostedFile.FileName); //get extension
if (fileExtension.Equals(".gif") fileExtension.Equals(".jpg") fileExtension.Equals(".jpeg")) //only jpg and gif are allowed
{
string fileName = System.DateTime.Now.ToFileTimeUtc().ToString() + System.IO.Path.GetFileName(imgUpload.PostedFile.FileName); //prefix filename with datetime, to make it unique
string path = Server.MapPath("ImageUpload/"); //prefix path to ImageUpload folder on the server
string fullPath = path + fileName; //set full path
//Write a new file on the server, for later preview from the client
HttpPostedFile File = imgUpload.PostedFile; //posted file handle
int len = File.ContentLength;
if (len <= maxFileSize)//verify that file doesn't exceed max allowed
{
//read file into the buffer
buffer = new Byte[File.ContentLength];
File.InputStream.Read(buffer, 0, File.ContentLength);
fs = new FileStream(fullPath, FileMode.Create);
fs.Write(buffer, 0, len);
bmp = new Bitmap(fs); //read buffer into bitmap
if (fileExtension.Equals(".gif"))
{
bmp.Save(fs, ImageFormat.Gif);//save gif
}
else
{
bmp.Save(fs, ImageFormat.Jpeg);//save jpeg
}
result = "Result::ImageUpload/" + fileName; //generate string that will be returned to the client
Session["localFileName"] = fullPath;
}
else
{
result = String.Format("Error::File exceeds maximum allowed size ({0}Kb).", (maxFileSize / 1024));
Session["localFileName"] = null;
}
}
else
{
result = "Error::Unsupported file format (only *.jpeg, *.jpg, *.gif are allowed).";
Session["localFileName"] = null;
}
}
}
}
catch (Exception ex)
{
result = String.Format("Error::{0}", ex.Message);
}
finally
{
if (bmp != null) bmp.Dispose();
if (fs != null)
{
fs.Dispose();
fs.Close();
}
//write response, fire FinishImagePreview from the parent, result is passed as a string
//of the follwoing format STATUS::MESSAGE,
//in case of success - Result::[Path to the Uploaded File]
//in case of failure - Error::[Error Message]
Response.Write("<script type='text/javascript' language='javascript'>");
Response.Write(String.Format("parent.FinishImagePreview('{0}');", result));
Response.Write("</script>");
}
}
Previewing the image should be relatively simple - it is just a matter of resizing the image and then reassigning the SRC attribute of <> tag. In Javascript - it should eventually come to something like this:
//filename should have the path pointing to the location on the server, NOT client!
function PreviewImage(filename){
var oldImage = document.getElementById(imageHolder)//imageHolder is image tag id
var newImage = new Image();
newImage.src = filename;
var x = parseInt(newImage.width);
var y = parseInt(newImage.height);
if (x>maxWidth) {
y*=maxWidth/x;
x=maxWidth;
}
if (y>maxHeight) {
x*=maxHeight/y;
y=maxHeight;
}
oldImage.src = newImage.src;
oldImage.width = x;
oldImage.height = y;
}
