Posted in jQuery, ColdFusion | Posted on 08-13-2010 | 3,054 views
ColdFusion 9 added a snazzy little Ajax-based (well, Flash based to be truthful) multi-file uploader. Just in case you haven't actually seen it, here is a quick snap shot of what it looks like:
I've done a few blog posts on this topic already. Today a reader sent in an interesting question. While the control provides a way to limit the total file size of uploads (using the maxuploadsize attribute), there is no direct way to limit the size of individual file uploads. This blog entry will show one way that can be accomplished. I'll be using jQuery for my solution but please note that this is not a requirement.
Ok, so the first problem we run into is that there is no support for noticing when a file is added to the queue. If there was, we could listen for that and simply throw an error then. The next problem is that there is no support for a "pre"-upload event. You get support for an upload complete event - but not one for right before the uploads begin. Luckily we have a way to work around this. We're going to disable the upload button and use our own logic to fire off the uploads. I'll show the entire template below and then walk you through what it does.
2
3<head>
4<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
5<script>
6$(document).ready(function() {
7 $("#uploadBtn").click(function() {
8 //get all the files
9 var files = ColdFusion.FileUpload.getSelectedFiles('myfiles');
10 if(files.length == 0) {
11 alert("You didn't pick anything to upload!");
12 return;
13 }
14 var oneTooBig = false;
15 for(var i=0; i<files.length; i++) {
16 if(files[i].SIZE > 40000) {
17 oneTooBig = true;
18 alert("The file, "+files[i].FILENAME +" is too big. It must be removed.");
19 }
20 }
21
22 if(!oneTooBig) ColdFusion.FileUpload.startUpload('myfiles');
23 });
24});
25</script>
26</head>
27
28<body>
29
30<cffileupload name="myfiles" maxuploadsize="10" hideuploadbutton="true">
31<br><br>
32<input type="button" id="uploadBtn" value="Upload Mah Filez!">
33
34</body>
35</html>
First - notice how in the cffileupload control I've used the hideuploadbutton attribute. As you can guess, this removes the button you would normally use to upload all the files. I've added my own button, uploadBtn, that will be used instead.
Now let's look at the JavaScript. When the upload button is clicked, I begin by using the ColdFusion Ajax API call, getSelectedFiles, to get an array of files in the control. Once I have that, it's rather trivial. I loop over each and if the file size is too big (I used 40K as an arbitrary limit), then I flag it and alert it to the user. If no file was too big I can then fire off the upload request, again using the document Ajax API call startUpload().
That's it. You can see here in this screen shot how the button was removed.
I've only ever used cffileupload once and it was pretty much standard use via the docs, so it's entirely possible I missed the plot entirely!!
As I said, I didn't change anything, was just trying to get started with the example. Any thoughts on what I might have done wrong?
$("#uploadBtn").click(function() {
add
console.log("CLICK HANDLER RUN");
This will only work if you have Firebug, or Google Chrome (and ensure the JavaScript console is open).
The page works fine with or without the extra line in either Firefox or Chrome (although I did get a 'console' is undefined error in Firefox the first time I tried it before adding the line - Been fine since, even with it removed again) and does log the click under both when added.
The page does not work for me in Safari 5 (Mac).
Hope that clears up any confusion that I may have caused.
TypeError: Result of expression '_650.getSelectedFileArray' [undefined] is not a function. ... cffileupload_swf.js:245
Didn't see this before, but it doesn't mean much to me unfortunately.
you can see it breaks right there, right?
It's just a word for word copy of your demo right now though.
Doesn't work in Safari, Chrome or Firefox at this url.
http://www.cfdevshack.com/test/test.cfm
Works locally as is. Debugging is not turned on.
any thoughts???
I know the standard cffileupload works in it's place but If this version only works under 901 though, that is probably the cause of my problem. Thanks again.
[Add Comment] [Subscribe to Comments]