Uploading an image with Cold Fusion and previewing with Javascript
This demonstration shows how to save image files that are uploaded in an html form and save them to disk on the server. The files needed can be downloaded below.
The demo also shows how to make use of the Javascript image object to allow a preview of the image after it has been selected but before it has been uploaded. It also extracts the height and width of the image, which could possibly be used later, for example with our CFX_JpegResize custom tag.
Unfortunately, this example has very limited browser support. It will not work with Netscape / Firefox browsers or with Internet Explorer 7. It does work with earlier versions of Internet Explorer.
There are 2 CFM files which must be put in the same folder. It must be web shared and set to read, write and execute scripts. The files used are listed below.
| File | Description |
|---|---|
| fileupload.cfm | The starting page. It contains an html form for uploading a file, and the Javascript preview and verification. |
| filesave.cfm | This is the script that handles the form data. It uses Cold Fusion to save the file. |
Some of the key points will be explained here, although it should be easy to follow by viewing the code listings.
Fileupload.cfm
This is the starting page. It contains an html form with an input type of "file". The important lines of the form are:
<form method="post" action="filesave.cfm" enctype="multipart/form-data" name="form1">
<input type="file" name="filesent" onSubmit="return CheckUpload()">
<input type="button" value="Preview" name="Preview" onClick="DoPreview()">
<input type="hidden" name="height" value="0">
<input type="hidden" name="width" value="0">
The first part gives the script that will process the form, and the method of sending the data. The tag "<input type="file" causes the browser to show a text field for the filename and a browse button (if the browser supports file uploads).
Two Javascript functions are called. "DoPreview()" is called by the button and it loads the file into an Image object in Javascript and assigns it to the img tag. "CheckUpload()" is called when the form is submitted. It checks that the field is not empty and that the image has a .JPG extension. It loads the image into an Image object to find the height and width which are then added to the form as hidden variables.
The Javascript
The DoPreview function is listed below:
function DoPreview()
{
var filename = document.form1.filesent.value;
var Img = new Image();
if (navigator.appName == "Netscape")
{
alert("Previews do not work in Netscape.");
}
else
{
Img.src = filename;
document.images[0].src = Img.src;
}
}
This function loads the file specified in the file input field into a Javascript image object. This is then assigned to the first (and only) image on the page. This is similar to the method of caching images for rollovers. Netscape / Firefox do not allow the Image object to be loaded with a local file. This feature may be deliberate as Javascript was never intended to be able to access the client file system. Unfortunately it prevents this function from working in a Netscape / Firefox browser. Internet Explorer 7 also fails to read the local file which makes this function increasingly obsolete.
The CheckUpload() function is not listed here, but you can view it if you download the demo. It also loads the file into an Image object and performs some verification. If verification fails the form will not be submitted. Verification includes checking that a file has been entered, checking that it has a .jpg extension, and checking that the image has a size. If the image is corrupt or in an invalid format nothing will be loaded into the image object so it will have no height or width.
The height and width properties of the Image object are read and assigned to two hidden form variables so they can be passed to the form processing script.
This function also cannot work with Netscape / Firefox / IE 7 for the same reasons. If the browser is one of these types, the form is not submitted. This part of the function could be removed to allow the file to be uploaded, but the height and width would not be read.
Filesave.cfm
This is the script that saves the file. It saves the file in the same directory as this script and it uses a random file name. In a serious application the name and location of the new file would need to be selected with more care.
The important lines of the script are:
<p>Height: <cfoutput>#form["height"]#</cfoutput><br>
<p>Width : <cfoutput>#form["width"]#</cfoutput></p>
<cfset currentdir=ExpandPath("./")>
<cfset filename=CreateUUID()>
<cfset filename=CurrentDir & filename & ".jpg">
<cffile action="upload" filefield="filesent" destination=#filename# >
<p>The file has been stored</p>
<p><a href="fileupload.cfm">Upload</a> another file.</p>
The first two lines display the height and width are displayed. These have been passed from the previous script as hidden form variables. Nothing is actually done with the height and width here, but the demo does show how they can be found.
The rest of the script generates a random file name by using the CreateUUID( ) function. The file is saved using this name.