AJAX File Uploader for ColdFusion
Uploading files with AJAX is a unique challenge due to the fact that file uploads require a form "post" with enctype="multipart/form-data". To get around this people have used a combination of IFrames and AJAX.
I found a great jQuery plug-in by Andrew Valums called Ajax Upload. Both Ray Camden and Ben Nadel have blogged about this plug-in in an earlier revision. When I consulted their blogs I couldn't get their techniques to mesh with the current version of the Ajax Uploader code. Ray and Ben both use cffile action=upload to handle the AJAX request.
For some reason I couldn't figure it out. So searching the comments on Andrew Valum's blog someone mentioned receiving the error message.
"The cffile action="upload" requires forms to use enctype="multipart/form-data"."
Andrew recommends using GetHttpRequestData() to grab the source for your file. After a little fiddling I got it to work.
To try it, download my two files and download Valum's AJAX Uploader
- Unzip Valum's AJAX Uploader into your web root.
- Place demo.cfm in the "client" folder inside Valum's AJAX uploader folder.
- Place coldfusion.cfc in the "server" folder insdie Valum's AJAX uploader folder
- Browse to the demo.cfm file and try it out. The file should be written to the "server' folder.
---------------------------------------
UPDATE: v 1.1.1 (Changes have been added to Valum's download on github)
- I was JSON serializing the return value twice. This has been corrected
- local scope added to variables in the cfc
Download version 1.1.1 of the code here.
UPDATE: Two problems where found in my original code.
- On successful upload, I was not returning the {success: true} JSON message. That is now fixed.
- For browsers that don't support XHR (IE 6 - 8 and older browsers), I didn't have a function to handle a regular form submission. That has been corrected as well.
Download version 1.1 of the code here.
Thanks to Joe and Tom for the feedback.
According to Valums site the latest version of his code works with FF3.6+, Chrome6+, Safari4+. This includes drag and drop for file upload.
Please advise. Thanks!
Thanks for the advice on the above, its been awesome and works very well. One thing though, I can't get this to work for IE8. He states in this link:
http://github.com/valums/file-uploader/blob/master/server/readme.txt
That is should fall back to old school AJAX iframe posting but my remote function is not getting the file element within the FORM scope? Any idea how to get this to work for IE8 and below
Thanks for any help you can give
Tom Jenkins
I seem to be having the same problem as Joe. Everytime I upload a file, it says "Failed", but it is in the folder on the server. The only time this is not the case, is if that file is already in the uploaded folder, in which case it does not get uploaded (It seems the MAKEUNIQUE variable fails on cffile).
I have the current version of your files and the ajax files. Any ideas?
Thanks!
I've uploaded version 1.1.1 that addresses the "failed" value. Let me know.
How I can use the standard file upload and then when I click the button let's say "SEND" it will upload the file using this Ajax upload not refreshing the page.
Thanks.
Great work... thanks so much for sharing it.
I have installed v1.1.1 and am having the issue with the "failed" response in IE8.
Also I am using the script as an image uploader, and would like to display the uploaded file via ajax, but am at a loss for how to do it.
any suggestions?
Thanks in advance.
The way this script works is through browser detection. If the browser support XHR, then AJAX upload is provided, but if not, the fallback is an iframe that submits with a form with enctype="multipart/form-data"
You'd have to modify the fileuploader.js file to change the fallback option to be part of your form.
First off, thanks for the file uploader.
However, the challenge of uploading files that are half a gig or larger remains.
We've ran in this limitation in CF9 and the Ajax loader in your site has it as well. Our work around consisted of using a flash based utility for uploading the file. As it is, ColdFusion 9 server running on Lynux or Windows will not upload gig sized files. Uploading large files is specially important for architects, engineers, etc.
~e
--------------------
Text error from my upload using your AJax uploader:
* ColdFusion_9_WWE_win.exe0.4GBFailed
I was wondering if anyone as gotten this to work in CFWheels? I've spent the better half of this afternoon try to get it to work but had no luck. I'm open for any suggestions, thanks.
Brad