Ten Years by Rev TheoryToday 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!
Related Posts
Related posts:
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?
I have the same question as Raczo, and how do you do it in php instead of coldfusion ?
So how do you set the destination folder for example into an id selected through a dynamic combobox…
Help will be appreciated !!!
Same question here as Raczo…
How can you set the destination folder into the value of a selected item through dynamic combobox.. I’m using php in backend.
Anyone got a hint?
I dont understand why when I take your exact files, in a new web site with nothing in it except for the files mentioned here, this script doesnt work fully.
It uploads the file, I can see the flash uploader working in the browser, but then just stops. The file actually gets uploaded ok, but the script stops. SO in a multi-file upload, only one file ever gets uploaded. The browser just sits forever with the progress at 100% on the first upload with the others all still queued.
Any idea where I can look for the problem?
WinXPPro, browsers IE8.0.6001, Firefox3.0.18, GoogleChrome4.0.249.89 I’m using ColdFusion 9 enterprise.
I’m not sure what I doing wrong but the file will not upload. The success message does show but no upload.
I removed the folder from the script and rename the extension of uploadify.php to cfm.
My folder structure looks like this: /css/uploadify.css /swf/uploadify.swf /js/jquery.js /js/swfobject.js /js/jquery.uploadify.v2.1.0.js
/upload.cfm – input page /uploadify.cfm – action page /uploads – folder
setup script: $(‘#uploadify’).uploadify({ uploader: ‘/swf/uploadify.swf’, cancelImg: ‘/images/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); }); } });
action script:
I got this working on a hosted environment but no luck on my local setups. The hosted site is running IIS/CF8. I have two local environments, one a Mac OS 10.6 with Apache and CF8 and the other on Window 7 CF 9 with Apache.
I also check folder permission for everyone account on the local machines and they are set to full. At this point I have to believe it’s a setting or issue with either Coldfusion or Apache.
Make sure in your Apache configuration that the directory in question is allowed access. Also ensure that the user that ColdFusion is running as has the correct permissions to the resources you are requesting.
I’m not sure where the issue is coming from. I can do a cffile upload without uploadify which should rule out permission access on both CF and Apache. Maybe a setting on the CF server for flash remoting, I don’t know?. I know it’s not code syntax since the same files work on my hosted site. I can’t believe I can’t get this to work on either my Mac or PC. Maybe it’s my httpd.conf file?
This should be a feature supported/added into CF since it’s using Flash.
Adam, thanks for your help so far. Greatly appreciated!
Adam,
I figured it out. It turns out it was the login logic in my Application.cfc. I kept the template file in the secure directory and moved the script file to another folder. Works like a charm. Feels so good to get it working.
Thanks, Jose
I got everything to work. Thank you bye the way
… I was wondering if you would know how I could store the filenames within a database? I would greatly appreciate it. It’s the only thing I have left to figure out. On my uploadify.cfm page I’m trying to work it out but no luck… I’m not sure that it can be done.
INSERT INTO photos SET photo_file_name = , type =
I figured it out! It’s really weird but in my uploadify.cfm file… If I have an extra “>” at the very end of my CFFILE tag everything works great! If I take away the “>” only the first file works… Glad I accidentally left an extra “>” there or else I probably wouldn’t have figured it out.
> (Magical Arrow)
INSERT INTO photos SET photo_file_name = , type =
Great blog here fellas…..Hey Brian, have you figured out why that extra “>” is needed? My script won’t work unless I do the same thing. Needless to say it’s an eye sore in the code…I’d prefer it to be syntactically correct…any ideas?
The magic “>” works because the processing script has to have some kind of output after the file is uploaded. I put a 1 at the end of my processing script to solve the same problem (would show 100% on the first file, and not go any further).
er..I meant to say I put an open cfoutput tag, then a 1, then a close cfoutput tag (the tags got swallowed by the comments, apparently).