Thursday, March 18, 2010

Image Preview functionality in SharePoint

How to display the Image preview without actually uploading the file in SharePoint?

To check the image preview we can temporary move/place the file in Layout folder. Then pass URL in following format to Image control:

After checking the Image preview and final upload of image file, we can delete the temporary image file from 12 hive.

Code snippet (comments are self-explanatory):

FileUpload FileUploadImage; //FileUpload control to select image file
Image myImage; //Image control to be used for preview functionality

//Getting 12 hive path through SPUtility.GetGenericSetupPath() function
string folderPath =

//Check folder path
if (!Directory.Exists(folderPath))

//Copy the image file to a temporary folder in 12 hive
File.WriteAllBytes(folderPath + FileUploadImage.FileName,

/* //File.Copy() will not work in case of remote image upload
folderPath + FileUploadImage.FileName, true);

//Set the URL of image control
myImage.ImageUrl =
"/_layouts/images/MYFOLDER/" + FileUploadImage.FileName;

Note: In a similar manner we can preview media file (like *.wmv) before actual upload in SharePoint.


Kamaldeep said...

Hi Avinash,

while browsing i came across your blog.

Can you help me with one thing.. we have requirements from HR team, where they upload scanned copies of employement documents as images.

Is it possible to search content inside images (this content is written by empoloyees in the joining kit). I am here talking about CBIR...

Plz suggest


Avinash said...

Hi Kamaldeep,

While uploading the scanned image, you can also enter some metadata related to that image as seperate columns values.

For e.g. Image may contain/belong to an Employee Name, ID, etc. Enter these valuse while uploading the image.

Then you can configure those metadata columns as searchable through SP Central Admin.