Using ColdFusion to save an uploaded image to the server

Question

I'm being stymied by what I thought would be the relatively simple task of creating functionality to allow users to upload a picture to a server directory and am looking for some help.

I have a simple form with a straightforward interface, passing a variable named 'imagedata' which is the data passed from a file input, a variable named 'name' which is a specified image name, and a variable named 'imagetype' which passes a file extension.

The code I'm using in the function (handler) to save this file is as follows:

<cfset form.imageName = form.name & "." & form.imagetype />
...
<cffile action="write" file="#sitepath#storage/bannerImages/#form.imagename#" output="#form.imageData#" />

This apparently won't work; it will save a file with the correct name, but does not save the file correctly and doesn't render as an image. I would think that this is something relatively simple, and I would think I've overlooked something because I'm not finding anything on google, which is odd. Help with this problem would be appreciated.

Answer 1

Don't use action="write", use action="upload".

Example:

<cffile
    action       = "upload"
    fileField    = "ImageData"
    destination  = "/tmp/uploads"
    accept       = "image/jpg"
    nameConflict = "MakeUnique"
/>

This will place the file in /tmp/uploads (use for example d:/tmp/uploads on Windows) - which is a directory not accessible online.

At this point, you must verify that the file is what it claims to be - an image file of appropriate dimensions and filesize, and not a masked EXE nor embedded ZIP.

Once you are happy the file is safe for hosting on your server, you can then move it to the appropriate directory and set the name to what was chosen.

Something like...

<cfif cffile.FileWasSaved>

    <cfset UploadedFileName = cffile.ServerDirectory & '/' & cffile.ServerFile />

    <cfif NOT IsImageFile( UploadedFileName )>
        <cfthrow message="Uploaded file not an image." />
    </cfif>

    <!--- INFO: Checks if zip embedded in image. --->
    <cftry>
        <cfzip action="list" file="#UploadedFileName#" name="tmp"/>
        <cfthrow message="Embedded zip files not allowed."/>
        <!--- TODO: Verify correct exception type for CF: --->
        <cfcatch type="java.util.zip.zipexception"></cfcatch>
    </cftry>

    <!---
        TODO: Validate any necessary business rules
        (e.g. image not too large, etc)
    --->        

<cfelse>
    <cfthrow message="File Upload Error"/>
</cfif>


<cfif refind('\W',Form.Name)>
    <cfthrow message="Invalid Name specified. Only alphanumerics allowed."/>
</cfif>
<cfif NOT ListFindNoCase('PNG,JPG,GIF',Form.ImageType)>
    <cfthrow message="Invalid FileType specified. Must be PNG/JPG/GIF"/></cfif>
</cfif>

<cffile
    action      = "rename"
    source      = "#UploadedFileName#"
    destination = "#sitepath#storage/bannerImages/#Form.Name#.#Form.ImageType#"
/>

That code is untested, and - as with everything you run on your servers, but especially so with code involving client uploads - make sure you understand what it is doing before using it.
There is plenty of valuable information on Adobe LiveDocs and on the various CF blogs that is worth spending some time digesting.