Yesterday (well, early this morning), I blogged about how you can use ColdFusion 8 for the rather simple (and common) task of verifying that a file uploaded is a valid image. In today's post I'll expand on this a bit and show how you can check the size of the image.

First and foremost - what do we mean by size? Do we mean file size or image dimensions? It has always been easy to check the size of an upload files. Consider this check:

<cfelseif fileupload.filesize gt 50000> <cfset errors = errors & "Avast Ye! Your image cannot be larger than 50k!<br />">

In this code block, fileupload was the result of my CFFILE/Upload tag. So as you can see, that is easy enough. But we also want to check the size of the image. For our sample application, we will only allow images up to 100 pixels high or wide.

To begin - we first need to create a ColdFusion Image variable. Images are a new type of variable in ColdFusion 8. Since we have an uploaded file, we can create the Image variable like so:

<cfset cfImage = imageNew(newfile)>

(You can also use imageNew() by itself to create blank images.) So now that we have an Image variable, we can then use the imageInfo() function to get information about the image:

<cfset imageData = imageInfo(cfImage)>

This returns a structure that includes information about the image, including:

  • colormodel - This is a structure with data about the colors of the image, including things like color depth, transparency, etc.
  • width, height - The width and height of course.
  • source - The filename of the image.

So once we have this structure, it is trivial to check the height and width:

<cfif imageData.width gt 100 or imageData.height gt 100> <cfset errors = errors & "Avast Ye! Image cannot be more than 100 pixels wide or tall!<br />"> </cfif>

As before - I've included the full template below. Enjoy.

<cfset errors = ""> <cfparam name="form.name" default=""> <cfparam name="form.picture" default="">

<cfif structKeyExists(form, "save")> <cfif not len(trim(form.name))> <cfset errors = errors & "Avast Ye! Include a name or walk the plank!<br />"> </cfif>

<cfif not len(trim(form.picture))> <cfset errors = errors & "Avast Ye! Include a picture or walk the plank!<br />"> <cfelse> <cffile action="upload" destination="#expandPath('./images')#" nameConflict="makeunique" filefield="picture" result="fileupload"> <cfif fileupload.fileWasSaved> <cfset newfile = fileupload.serverdirectory & "/" & fileupload.serverfile> <cfif not isImageFile(newfile)> <cfset errors = errors & "Avast Ye! Include a VALID picture or walk the plank!<br />"> <!--- clean up ---> <cffile action="delete" file="#newfile#"> <cfelseif fileupload.filesize gt 50000> <cfset errors = errors & "Avast Ye! Your image cannot be larger than 50k!<br />"> <cfelse> <!--- check the dimensions ---> <cfset cfImage = imageNew(newfile)> <cfset imageData = imageInfo(cfImage)> <cfif imageData.width gt 100 or imageData.height gt 100> <cfset errors = errors & "Avast Ye! Image cannot be more than 100 pixels wide or tall!<br />"> </cfif> </cfif>
</cfif> </cfif>

<cfif errors is ""> <cfoutput> <p> Here is where we would update the database and send the user away... </p> </cfoutput> <cfabort> </cfif>

</cfif>

<cfif errors neq ""> <cfoutput> <p> <b>Please correct the following error(s):<br /> #errors# </b> </p> </cfoutput> </cfif>

<cfoutput> <form action="imageuploadform.cfm" method="post" enctype="multipart/form-data"> <table> <tr> <td>Your Name:</td> <td><input type="text" name="name" value="#form.name#"></td> </tr> <tr> <td>Your Picture:</td> <td><input type="file" name="picture"></td> </tr> <tr> <td> </td> <td><input type="submit" name="save" value="Save"></td> </tr> </table> </form> </cfoutput>