Uploading files

The cffileupload tag lets you select multiple files and upload them to a server.

Working with the cffileupload

The cffileupload tag displays a dialog that lets you upload multiple files. The following are the file upload features:

Uses callback and error handlers that lets provides control over file upload process after upload completion or if errors occur.
Lets you style the file upload control
Provides option to stop or continue with upload in case of errors
Provides option to send custom response to callback and error handlers

Sending custom response to the callback and error handlers

The page/URL that handles the upload operation on the server can send back a struct with the keys status and message as shown here:

<cffile action = "upload"
destination = "#Expandpath('./upload')#"
nameconflict="makeunique">
<cfset str.STATUS = 200>
<cfset str.MESSAGE = "File Upload Successful"> <cfoutput>#serializeJSON(str)#</cfoutput>

The following example illustrates the error handler:

<cftry>
<cffile action = "upload"
destination = "#Expandpath('./upload')#">
<cfcatch type="any">
<cfset str.STATUS = 500>
<cfset str.MESSAGE = "Error occurred while uploading the file"> <cfoutput>#serializeJSON(str)#</cfoutput>
</cfcatch>
</cftry>

If the user tries to upload a file already present in the upload directory, it results in an error. The status and message are set to the specifications in the catch block.

Using styles

The attributes headercolor, textcolor, bgcolor, titletextalign, titletextcolor, and rollovercolor lets you style the file upload control.
The following example illustrates the styling of file upload control:

The following code shows how the attribute onUploadComplete is used:

<script language="javascript">
var uploadCompleteHandler = function(obj){
var result = "Upload Details:" + "\n\n";
for(var i=0;i < obj.length; i++){
result = result + "FILENAME: " + obj[i].FILENAME + "\n" + "STATUS: " + obj[i].STATUS + "\n" + "MESSAGE: " + obj[i].MESSAGE + "\n\n";
}
}
</script>
<br>
<cffileupload
url="uploadall.cfm"
name="myuploader"
onUploadComplete="uploadCompleteHandler"
maxUploadSize=100
stopOnError=false
/>

Securing your uploads by default (by verifying the MIME type)

When you use the tag cffile for actions upload and uploadAll, the enhancements let you:

Use fittribute accept.
Check for proper MIME type of the file using strict=true by default.

Note: If you use multi-file uploader, there can be instances where the upload fails (for example, when MIME type or extension check fails) but the status in the uploader shows "Done". In such scenarios, you must trap the errors in the upload page and send back a serialized struct with MESSAGE and STATUS keys set to the error condition.

Get help faster and easier

New user?