<cffileupload extensionfilter="jpg,jpeg,gif,png,bmp,tiff,pdf" name="portfoliofiles" maxfileselect="5" title="Portfolio Images" url="fileupload.cfm?#urlEncodedFormat(session.urltoken)#" oncomplete="previewfile">
(By the way, I also added PDF to the list of extensions, more on the later.) The previewfile function will be passed an object containing the filename and the result from our server side code that handles uploads. Our demo code uses the same name as the user's file, so there is no need to worry about the file having a different name on the server. Here is what I did with the result:
Pretty complex, eh? All I needed to do was create some simple HTML. I point to a new CFM called preview and pass in the file name. Let's take a look at preview.cfm.
<cfparam name="url.s" default="">
<cfif isImageFile(session.myuploadroot & "/" & url.s)> <cfimage action="read" source="#session.myuploadroot#/#url.s#" name="img"> <cfset ext = listLast(url.s,".")> <cfset imageScaleToFit(img,125,125)> <cfelse> <cfimage action="read" source="default.jpg" name="img"> <cfset ext = "gif"> </cfif>
<cfset bits = imagegetblob(img)> <cfcontent type="image/#ext#" variable="#bits#">
So what's going on here? Remember that we use a special folder in the virtual file system for the user's uploads. Because of this we can source a CFIMAGE to the file requested. We can also check to see if the file is a valid image. If it isn't, we can use a default picture instead. The final thing we do is get the actual bits and serve it up via cfcontent. Here is a screen shot of the result. Notice that I could have made this look far nicer.
Hopefully this makes sense and is useful!