Christian Cantrell: How to Implement an Image Upload Preview

« Cool Tool Friday: Gmail and Other Web-based Email | Main | See Yourself in a Satellite Photograph! »

June 14, 2004

How to Implement an Image Upload Preview

Let's say you have an application that allows users to upload images, but you want them to be able to preview the image they are about to upload to make sure it's the right file before they actually upload it since uploading the wrong file costs time, bandwidth and disk space. Try browsing to a file on your local machine in the file input below and see if this trick works:

I put this very simple (but very useful) code together over the weekend, but I haven't tested it widely. Did it work for you? If not, what browser/platform are you using? Here's the code in case you want to use/modify it yourself:

<script language="javascript">
var imgRe = /^.+\.(jpg|jpeg|gif|png)$/i;
function previewImage(pathField, previewName)
{       
    var path = pathField.value;
    if (path.search(imgRe) != -1)
    {   
        document[previewName].src = 'file://'+path;
    }       
    else    
    {   
        alert("JPG, PNG, and GIFs only!");
    }   
}
</script>

<div align="center">
<form name="imageTest">
<input type="file"
       name="myImage"
       size="30"/>
<input type="button"
       value="Preview!"
       onClick="previewImage(document.imageTest.myImage,
                             'replaceMe')"/><br>
<img src="images/clear.gif" name="replaceMe"/>
</form>
</div>

It should also be possible to use this code to do client-side image dimension validation, but I haven't written that part yet. I want to see how well this works first before going any further.

Posted by cantrell at June 14, 2004 3:08 PM

Comments

Worked for me... Win XP Pro, Firefox 0.8

Posted by: Kevin Hoyt at June 14, 2004 4:14 PM

Hey that's a great idea. Worked for me, too Win XP, IE6.

I've played around a bit and made the preview button obsolete by watching the content of the file box. Just add these lines:

function checkSrc(){
if (lastSrc!=document.imageTest.myImage.value){
lastSrc=document.imageTest.myImage.value;
previewImage(document.imageTest.myImage,'replaceMe');
}}
var lastSrc=document.imageTest.myImage.value;
setInterval("checkSrc()",50);

Posted by: Mario Klingemann at June 14, 2004 4:28 PM

Works for safari 1.2.2 (v125.8) OS X 10.3.4 - Nice! -Rob

Posted by: Robert M. Hall at June 14, 2004 5:30 PM

Worked:
W2K IE 6.0
W2K Firefox 0.8
W2K NS 7.1

Didn't Work:
W2K NS 4.77
OSX IE 5.2

Posted by: Disco at June 14, 2004 6:11 PM

TerraForm 2.6 provides similar functionality with the enhancedfile format.

http://www.eswsoftware.com/products/terraform/index.cfm

But instead of a preview button the form displays a "thumbnail" of the selected image.

I have found Terraform to be an invaluable tool to use when creating forms with ColdFusion. The learning curve can be a bit steep but once you've got it, Terraform does so much heavy lifting I coulndn't imagine reinventing all of these wheels over again.

Posted by: David at June 14, 2004 8:01 PM

I've used something similar ages for some old project but had the preview pop up in a new window. Just something i'd thought i'd add.

p.s. I think i had the new window resized to the image via Js aswell. Sorry 1am here and can't remember where i've placed the code.

Posted by: Andy Jarrett at June 14, 2004 8:41 PM

Doesn't work on Opera 7.51, Windows XP Home SP1.

Posted by: Peter Tilbrook at June 14, 2004 9:21 PM

Very nice code. Simple Yet useful. Thanks for sharing

Posted by: Muruganandh P R at June 15, 2004 9:40 AM

Worked great!
Mac OS X 10.3.5, Safari 1.2.3

Posted by: Adolph Trudeau at September 3, 2004 8:36 PM

On a Mac OS x 10.3.5
Works great with Safari 1.2.3.
IE5.2.3 doesn't show preview.
Thanks for sharing

Posted by: Tina at September 28, 2004 11:43 AM

Works fine in IE 6 but not in FireFox 1.0
Anyone know the setting I have incorrect. I have looked but can't find it.
Thanks

Posted by: Travis at January 22, 2005 8:17 PM

Yea, it works fine in IE 6 but not in FireFox 1.0 and 1.0.1 as well...

Thanks,
Sarjya

Posted by: Sarjya at March 3, 2005 1:13 PM

since Firefox does not allow access to local files from remote sites, so the image preview won't work anymore.
The __ONLY__ workaround for this is this:

- type about:config in the addressbar
- type security.checkloaduri
- doubleclick the value found to be set to FALSE
try now.
This is a known bug added to firefox, and it's caused by some lazy developers, it should be easy to check if there's an image or a malicious file, security makes some people paranoid.

Posted by: Emil Tamas at March 14, 2005 6:46 AM

Does anybody have an idea on how to get the "security.checkloaduri" value in Firefox/Javascript ? Just So an appropriate info can be displayed to user wanting to browse local files ?

Posted by: xavier at July 13, 2005 3:00 PM

its working properly on IE-6.0. but nor working on netscape 6.2. If anybody knows, how to edit this code for working with netscape 6.2, please add it to this article.

Dhanu...

Posted by: Dhanu at September 26, 2005 9:01 PM

About the Firefox bug:

I have the security.checkloaduri set to true, so the security-thing should be on, but this script works fine. Maybe they got around to fixing this bug.
in firefox 1.0.7

function previewImage(){
localSource = "file://"+document.getElementById('file').value;
document.getElementById('target').src = localSource;
}

Posted by: carsten888 at November 11, 2005 11:15 AM

May I add to the above that the upload-test on top of this page does still not work in Firefox 1.0.7 but the script underneath does. (I will also include the HTML now)

function previewImage(){
localSource = "file://"+document.getElementById('file').value;
document.getElementById('target').src = localSource;
}

Posted by: carsten888 at November 11, 2005 11:20 AM

ok. and once again the HTML:
(pasting plain html does not seem to work here):

Posted by: carsten888 at November 12, 2005 1:03 AM

(and the monologue continues:)

now combined with checking if the source changed:

var lastSrc = '';

function checkSrc(){
if (lastSrc!=document.getElementById('file').value){
previewImage();
lastSrc=document.getElementById('file').value;
}
}
setInterval("checkSrc()",50);

function previewImage(){
localSource = "file://"+document.getElementById('file').value;
document.getElementById('target').src = localSource;
}

gr,
Carsten888

Posted by: carsten888 at November 12, 2005 1:15 AM

I should add that this script does NOT work online. GGGRAAAGHhhhh!

gr,
Carsten

Posted by: carsten888 at November 13, 2005 1:46 AM

Not need to try for FireFox 1+ any more
even static page fail to load local image
[code]
<body> <img id="uploadfile0msg" src="file:///D:/252421220.jpg" alt="" border="0" width="200"></body>
[:code]
[effect]

[:effect]

Posted by: Jason at November 24, 2005 12:12 PM

This script work fine offline in Epiphany 1.4.8 and Mozilla-FireFox 1.0.4 in Linux.

In apache web server with .php or .html extension don't work...

Thanks!
CyberCanibal!

Posted by: CyberCanibal at January 4, 2006 10:12 AM

Hello there...

All information about for resolve this problem is here:

http://kb.mozillazine.org/Links_to_local_pages_don%27t_work

Bye!

Posted by: CyberCanibal at January 5, 2006 10:38 AM

Christian Cantrell

Adobe AIR Application Developer, Product Manager, and Evangelist

June 14, 2004

How to Implement an Image Upload Preview

Comments