I was looking for an elegant way to upload images AJAX style. I'm new to all this mind you, and I couldn't find anything really simple and clear to teach me how to do this with a CFC and jQuery. There are some GREAT things out there from Ray Camden and others using Valum's AjaxUpload plug-ing (found here)but it was mostly using a CFM to process the stuff. So, here is my incredibly bare bones AJAX style upload using a CFC with jQuery and Valum's AjaxUpload plug-in.
Here's the page (don't forget your DTD):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/ajaxupload.js" type="text/javascript"></script>
<title>AJAX Upload Test</title>
<script type="text/javascript">
$(document).ready(function() {
// Begin document.ready function //
// Fire up Valum's AjaxUpload
new AjaxUpload('upload_button', {
// Since I'm using a cfc I put the method and returnFormat in the string so CF knows to return json
action: 'cfc/engine.cfc?method=uploadImage&returnFormat=json',
// the default name...
name: 'userFile',
// Tell us to expect json in return
responseType: 'json',
// When teh upload is done, populate the preview with the file we just uploaded
onComplete: function(file, response) {
$('img#preview').attr('src', response.PREVIEW);
// Use this console.log to see exactly how the cfc is returning the json data
// then delete it before deploying to your production server
console.log(response);
}
});
// End of document.ready function //
});
</script>
</head>
<body>
<!-- no form needed as the plug-in essentially puts an invisible form field over the top of whatever you want... -->
<div id="upload_button">Upload</div>
<!-- This is where the image will be displayed when the CFC sends the details back to teh onComplete function -->
<!-- You'll likely want to hide this or populate it with a default image to start with -->
<img src="" id="preview" alt="The Preview" />
</body>
</html>
And the CFC:
<!--- Your destination directory --->
<cfset destdir = expandPath("../holding")>
<!--- Your function --->
<cffunction name="uploadImage" access="remote" output="false" returntype="struct">
<!--- if you're on CF8, be sure to set output to false. --->
<!--- Capture the file from the form --->
<cfargument name="userFile">
<!--- Upload the file to a directory --->
<!--- CAUTION please be aware that you would normally do a bunch of validation here to make sure it's an image --->
<!--- and you should probably upload the file to a directory outside your webroot! --->
<cffile action="upload" filefield="userFile" destination="#destdir#" nameconflict="makeunique" result="result">
<!--- Now you've got the file, create a copy here and resize it then pass that new name to the .preview variable --->
<!--- More Processing code here... --->
<!--- Now, create a struct for CF to return to your function on the page. This is a great place to put all --->
<!--- that image info you'll need to save the image name to the database for further use --->
<cfset uploadReturn=structnew()>
<!--- use the console.log in your onComplete jquery function to see this information --->
<!--- thanks Raymond Camden for your help here! --->
<cfset uploadReturn.newfile=#destdir# & "/" & result.serverfile>
<cfset uploadReturn.preview="holding/" & result.serverfile>
<cfset uploadreturn.name="Put something great here...">
<!--- This is the name of the struct being returned to the function as json --->
<cfreturn uploadReturn>
</cffunction>
As aforementioned, I'm incredibly new to this so I'm open to constructive ways of refining and dressing up this code.
Thank you.