Installing Uploadify
This is a simple post on how to use the excellent uploading jQuery, Uploadify, with Coldfusion 6.
You will need to find and download jQuery, swfobject.js and the jQuery-Uploadify.xxx.js library from the uploadify site
Create two files in the downloaded uploadify directory (the same as the default uploadify.css). The first should be called ‘index.cfm’. The next ‘upload.cfm’.
index.cfm
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Uploadify Example Script</title>
<link href=”uploadify.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”swfobject.js”></script>
<script type=”text/javascript” src=”jquery.uploadify.v2.1.0.min.js”></script><input id=”fileInput” name=”fileInput” type=”file” />
<script type=”text/javascript”>// <![CDATA[
$(document).ready(function() {
$('#fileInput').uploadify({
'uploader' : 'uploadify.swf',
'script' : 'upload.cfm',
'cancelImg' : 'cancel.png',
'auto' : true,
'folder' : '/uploads',
'sizeLimit': '2004857600',
'onError' : function(a, b, c, d) {
alert("Event: "+a+", QueueID: "+b);
alert("FileInfo: "+c.name+", "+c.size+", "+c.creationDate+", "+c.modificationDate+", "+c.type);
alert("Error: "+d.type+", "+d.info);
}
});
});
// ]]></script></html>
upload.cfm
<cfscript>
thisPath = ExpandPath(“*.*”);
thisDirectory = GetDirectoryFromPath(thisPath);
FileDir = thisDirectory & “uploads/”;
</cfscript><cfif not DirectoryExists(FileDir)>
<cfdirectory action=”create” directory=”#FileDir#” >
</cfif><cffile action=”upload”
filefield=”fileData”
destination=”#FileDir#”
nameconflict=”makeunique”>
Create a folder called ‘uploads’ in the root of your site. Make sure it has read and write permissions (chmod 666). Run index.cfm and you should be away!