Tom,
Here is how I implemented in. Let me know if you need more info on what
is going on in the code below. It works in all supported uploadify
browsers including Chrome.
Image.cfm view that displays the upload button.
<!--- Multi-image upload button --->
<table cellpadding="3" cellspacing="10">
<tr>
<td><div id="uploadify"></div></td>
<td><b>Select Image(s) to Upload.</b></td>
</tr>
</table>
<script>
//Browse button for multi-image upload.
$(document).ready(function() {
$('##uploadify').uploadify({
uploader: '/includes/javascript/uploadify.swf',
folder: '/tmp',
cancelImg: '/includes/images/cancel.png',
multi: true,
auto: true,
script:
'remote/imageProxy.cfc?method=moveImage&anyextrainfo=#anyextrainfo#',
fileDesc: 'Image files',
fileExt: '*.jpg;*.jpeg;*.gif;*.png',
onComplete:
function(event,queueID,fileObj,response,data){
//alert(fileObj.filePath);
$.ajax({
type: 'post',
url:
'remote/imageProxy.cfc?method=uploadImage&anyextrainfo=#anyextrainfo#',
data: {name:fileObj.name,
contentType:fileObj.type},
success: function(result) {
alert('Success.')
},
error: function(request, error){
alert('There was an
error uploading one of the images, please try again.');
}
});
},
onError:
function(event,queueID,fileObj,errorObj) {
alert("The file " + fileObj.name + "
failed to upload correctly. Pleaes try this file again.")
},
onAllComplete: function(event, data) {
$('##message').html('Files uploaded
successfully.').fadeIn('slow', function() {
setTimeout('$("##message").fadeOut("slow");', 3000); });
}
});
});
</script>
imageProxy
<cfcomponent name="ImageProxy" output="false"
extends="coldbox.system.remote.ColdboxProxy" hint="Image Proxy to tie
our ajax calls to coldbox">
<!--- moveImage --->
<cffunction name="moveImage" output="false" access="remote"
returntype="any" hint="I proxy the call to the event to move the
images">
<cfset var results = "">
<!--- upload the image to the tmp folder --->
<cfset var uploaddir = #expandPath('/')#& "/tmp">
<cfif not directoryExists(uploaddir)>
<cfset directoryCreate(uploaddir)>
</cfif>
<cffile action="upload" filefield="form.fileData"
destination="#uploaddir#" nameconflict="overwrite" />
<cfreturn 1><!--- This is very important. Uploadify
expects a 1 result always --->
</cffunction>
<!--- uploadImage --->
<cffunction name="uploadImage" output="false" access="remote"
returntype="any" hint="I proxy the call to the event to upload the
images">
<cfset var results = "">
<!--- This is an event that handles move the img from
its uploaded temp location to its final location, saves the reference to
the db, or whatever you need it to do --->
<cfset arguments.event = "imageAdmin.uploadImage">
<cfset results =
super.process(argumentCollection=arguments)>
<cfreturn 1>
</cffunction>
</cfcomponent>
Hope this helps.
Curt Gratz
Computer Know How
Coldbox Alliance Partner