Multiple File Uploads with ColdFusion, jQuery, and Uploadify
Today had a need to work with a page that needed to allowed the quick upload of multiple images. I decided pretty quickly that a basic loop of file upload text boxes would be too icky, and did a quick search for what jQuery plugins were available. The first one on the list, and most impressive on the demo page, was Uploadify.
Although the documentation is a bit on the light side, it seems to cover just about everything you would need to get going, and I have to say that this is a clean little Flash uploader. So I though it would be nice to put together a little tutorial on how to get up and running with Uploadify quickly. For this demonstration we will be using ColdFusion on the back-end to receive our uploaded files.
The first thing you will need is a recent copy of jQuery. This is a simple matter of browsing to http://www.jquery.com and, on the front page, clicking on the big Download jQuery button. I would recommend using the non-minified version for development. Save the JS file in a directory under your site root at /js/jquery.
Now we need the Uploadify library. Browse to http://www.uploadify.com/download and download the latest version. This will come packaged as a ZIP file, so open it up with your favorite ZIP utility. Extract all of the contents to /js/uploadify under the root of your site.
Ok, now lets get started. Let’s create an index.cfm page. We’ll start with a basic page that will have all of our CSS and JavaScript references, as well as a paragraph for messages, and a DIV for the Uploadify Flash object. That looks like this.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Uploadify Demo</title> <link href="/styles/uploadify.css" rel="stylesheet" type="text/css" media="screen" /> <script language="javascript" src="/js/jquery/jquery-1.3.2.js"></script> <script language="javascript" src="/js/uploadify/swfobject.js"></script> <script language="javascript" src="/js/uploadify/jquery.uploadify.v2.1.0.js"></script> </head> <body> <h1>Uploadify Demo</h1> <p> Please select images to upload. You may select multiple, and they will begin as soon as you click Ok on the Open Dialog box. </p> <p id="message" class="messageBox" style="display: none;"></p> <div id="uploadify"></div> </body> </html> |
There are a couple of points of interest here. First note that there is a stylesheet to load when using Uploadify. Then you will see that we include the jQuery library, the swfobject.js file, and finally the Uploadify script. As promised we also have a paragraph for displaying messages, which starts out not displayed. We also have a DIV named uploadify for the Flash uploader object.
To use Uploadify you start with what jQuery does best: selecting an element. We then apply the uploadify method and pass in a number of parameters to set it up. In our tutorial we want to allow multiple uploads at one time, and we want the to automatically start. That looks like this.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $('#uploadify').uploadify({ uploader: '/js/uploadify/uploadify.swf', folder: '/uploads', cancelImg: '/js/uploadify/cancel.png', multi: true, auto: true, script: '/uploadify.cfm', fileDesc: 'Image files', fileExt: '*.jpg;*.jpeg;*.gif;*.png', onAllComplete: function(event, data) { $('#message').html('Files uploaded successfully.').fadeIn('slow', function() { setTimeout('$("#message").fadeOut("slow");', 3000); }); } }); |
The parameters are explained as follows.
- uploader: – Path to the uploadify flash file (SWF)
- folder: – Target folder to upload files to
- cancelImg – Path to the closing X image
- multi: – True to allow multiple uploads
- auto: – True to start uploading once the file is selected
- script: – Name of the ColdFusion script to handle the upload server-side
- fileDesc: – Description of the file filter list
- fileExt: – List of file filters. These are allowed files to select for uploading, delimited by semi-colon
- onAllComplete: – Callback method called by Uploadify when all uploads are complete
The neat part is the onAllComplete, but we’ll come back to that. First let’s talk about the ColdFusion script that will handle accepting the file. This one is simple. It just has to take the file and move it to our directory. The directory we want will be called /uploads.
1 | <cffile action="upload" filefield="form.fileData" destination="#expandPath('/')#/uploads" nameconflict="overwrite" /> |
Well that was easy! This command simply gets the uploaded file from the FORM field fileData, and moves it to the /uploads directory, and overwrites any existing files that may get in the way.
Ok, so that’s cool. But now we want to alert the user when the upload is done and tell them all went well. To do that lets look at that callback in the JavaScript again.
1 2 3 | onAllComplete: function(event, data) { $('#message').html('Files uploaded successfully.').fadeIn('slow', function() { setTimeout('$("#message").fadeOut("slow");', 3000); }); } |
According to the Uploadify documentation the onAllComplete event takes two parameters: event, and data. For our purposes we don’t care much about them. If you want to know what they contain use console.log with Firebug to inspect them. This little block of code will select the message DIV, set the HTML to a message saying all went well, then fades it in. Notice that the second parameter of fadeIn is a function, indicating that we want a callback to execute once the fade in is complete. This function, in turn, sets a time out to select the message DIV again and fade it out after 3 seconds. This will give us a nice little message that fades in, then after 3 seconds fades away.
Let’s look at both pieces of code in full.
/index.cfm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Uploadify Demo</title> <link href="/styles/uploadify.css" rel="stylesheet" type="text/css" media="screen" /> <script language="javascript" src="/js/jquery/jquery-1.3.2.js"></script> <script language="javascript" src="/js/uploadify/swfobject.js"></script> <script language="javascript" src="/js/uploadify/jquery.uploadify.v2.1.0.js"></script> </head> <body> <h1>Uploadify Demo</h1> <p> Please select images to upload. You may select multiple, and they will begin as soon as you click Ok on the Open Dialog box. </p> <p id="message" class="messageBox" style="display: none;"></p> <div id="uploadify"></div> <script language="javascript" type="text/javascript"> $(document).ready(function() { $('#uploadify').uploadify({ uploader: '/js/uploadify/uploadify.swf', folder: '/uploads', cancelImg: '/js/uploadify/cancel.png', multi: true, auto: true, script: '/uploadify.cfm', fileDesc: 'Image files', fileExt: '*.jpg;*.jpeg;*.gif;*.png', onAllComplete: function(event, data) { $('#message').html('Files uploaded successfully.').fadeIn('slow', function() { setTimeout('$("#message").fadeOut("slow");', 3000); }); } }); }); </script> </body> </html> |
/uploadify.cfm
1 | <cffile action="upload" filefield="form.fileData" destination="#expandPath('/')#/uploads" nameconflict="overwrite" /> |
And that’s it! Happy coding!
Layla by Eric Clapton
Thanks for the code. But the uploadify.cfm is not uploading for me.
Neat and clean. I like it.
i managed to make it work by putting a dump in the uploadify.cfm at the end.
cause without it it uploads but don’t remove the uploading bar and show successful.
It could be an IO exception on the CFM post page. It kinda stinks that you can’t see the error due to the uploader being flash. I would recommend adding CFTRY/CFCATCH blocks around the tag and log any exceptions to a file to see what you can find. You can also try creating a basic form with a file upload that posts to your uploadify.cfm page to see what errors may show up. Let me know how it goes.
If I can ever get ColdFusion to work on my Vista box, I’ll be sure to try this out. Seems nifty.
This just does not work for me… I copied it and never uploads. Is there a better way to trouble shoot this?
If you’d like I can take a look at your code if you’d like to send it over.
@Adam Would you allow me to translate your articles into Portuguese and post them on our Brazilian community blogs like http://ensina.me/coldfusion ? I’ll give you all the credits, of course. Thanks.
Sure. That sounds cool to me! Just post a link to them as a comment here pretty please. Thanks!
can we do this option fileDesc: ‘Image files’,
in 2 ligne like this ‘images files : jpg , bmp’ ‘video files’ : avi , mpg’
Fedora,
I’m not seeing any way to accomplish this. I know that in Flash this can actually be done. However, based on what I’m seeing the JS code it sent over as a simple one-liner. I see also that you posted on their forums asking the same question, and you are not the only one. So far it seems there is no answer for THIS plugin. Sorry.
Adam,
I’m trying to get this work, but it never seems to go to the uploadify.cfm page – and furthermore, there is no form.fileData field in your example – how is the CF code on the action page going to know what do do if there’s no form variable?
If I’m being thick and missing the obvious, please let me know, and thanks for your time creating this!
The reference to form.fileData is in the uploadify.cfm. The uploadify.cfm page is called by the SWF object, and is setup in the JavaScript in index.cfm. First thing I would check is to make sure you have no JS errors occurring. The best way to do this is use Firebug in Firefox, and to turn on the console debugging. Let me know what you find from here!
Been using Firebug throughout this process – no JS errors – it just says the files are uploaded, but when I check the directory the files should be going to, it’s empty.
It’s as if the cfm action page isn’t called at all in the whole process.
is the script (the cfm file being called) path relative to the index.cfm page, or relative to where the SWF file (uploadify) is being called? I get the impression that it’s relative to the index.cfm, but I just wanted to make sure.
I’m also using expandPath() to set the folder destination… I’ve verified that it’s correct (the path) as well.
It should be relative to the SWF, since it is the Flash that is actually calling the upload page.
OK, still no luck – here’s my folder structure of my site:
[root] |–[manager] | |–fileupload.cfm | --fileupload_action.cfm |–[uploadify] | |–uploadify.swf | |–uploadify.css | |–jquery.uploadify.v2.0.3.min.js | --cancel.png --[data] --[Temp] (where I want to save uploaded files)
And here’s the JS for the uploadify call:
And here’s my fileupload_action.cfm content:
Like I said; no JS errors, all paths seem to be correct, but it never seems to call fileupload_action.cfm to actually upload the file.
Ah, the formatting on the file structure I posted got a bit mangled – the Temp folder should be inside the data folder, and the uploadify stuff should be in the uploadify folder, and the uploadify folder should be in the manager folder.
I’d give a link to it directly, but it’s on an internal dev server that can only be accessed internally.
Hmm. Ok, have you created a plain, vanilla form with a file field that posts to your upload page? Then on your upload page you can do a dump of your scopes and maybe see what’s going on.
Yes, that works perfectly fine. I didn’t do a CFDUMP, but the file did upload to the specified directory using the action page code, so I know that part of it is right – just calling that page seems to be the issue.
Hmm. Ok. Can you send me the files, as well as a description of how your environment is setup? adam at adampresley dot com.
Thanks, Adam – I’ve sent you an email with the attached files, and I’ll continue trying to get it work and let you know if I do – hopefully you’ll immediately see what I’ve done wrong, and point out my boneheaded mistake(s)!
Ok. I was able to get this to work with only two changes. In the cffm_fileupload.cfm file I took out the “folder” property from the uploadify setup, and altered the path to the “script” property to ‘cffm_fileupload_action.cfm’. Turns out it is relative to the current page.
I will send you a zip of what I’ve done. Let me know how it turns out!
Adam,
You’re the man! Thanks for your outstanding post, it worked great.
One small comment, as you mention above in your previous post. Once the downloaded uploadify example was working correctly, I just had to:
remove the folder property from the uploadify setup in “index.cfm”
change the “script” property in the jquery.uploadify.v2.1.0.js file from “uploadify.php” to “uploadify.cfm” (duh)
Then it worked like a champ! Thanks for the help
Hi!
Is there any way to customize the upload control and add a combobox so by example… it can let you select a file category?