CFMU Update: onCompleteAll

08/16/2009 | CFMU | 8 Comments

A couple people have asked about fixing up the events and with a prior release I was able to fix the on complete method. The on complete method will call a JavaScript method using the ExternalInterface library after each item in the list has been uploaded. Now that that works we needed a way to notify the client that all files were uploaded. After each file is successfully uploaded that file is removed from the files array. A quick check to see the length will let us know when we are done with all of the files // I am called when A file upload is complete private function uploadComplete(event:Event):void { var f:FileReference = event.target as FileReference; if(callbackOnComplete != "" && ExternalInterface.available){ ExternalInterface.call(callbackOnComplete,f); } _files.removeItemAt(_files.getItemIndex(event.target)); // if the files array is 0 fire off a notification that all files are done uploading if(!_files.length){ if(callbackOnCompleteAll != "" && ExternalInterface.available){ ExternalInterface.call(callbackOnCompleteAll,f); } } }

With that I decided to whip up a quick demo which is also in the download. This example will write each file name to the browser screen as its uploaded and then write out a message that all files are done. <html> <head> <title>CFMU onComplete methods</title> <link type="text/css" rel="stylesheet" href="demo.css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> function logEach(f){ $("#results-content").append(f.name + "<br/>"); } // this method is not passed data, it is just a notification that all files are done function logAll(){ $("#results-content").append("<br/><br/>" + "All files have been uploaded."); } </script> </head> <body> <p>This demo shows both the onComplete and onCompleteAll listeners at work. The onComplete method will fire after each file has been uploaded and the onCompleteAll event will fire after all files in the list have been uploaded.</p> <cfmodule template="../cfmu/uploader.cfm" basePath="../cfmu/" id="adv-on-complete" title="CFMU Advanced on complete example" width="400" height="300" url="../demo/Uploader.cfc?method=upload" dir="#expandPath('.')#\images\" onComplete="logEach" onCompleteAll="logAll"/> <div id="results"> <h3>Upload Results</h3> <div id="results-content"></div> </div> </body> </html>

If you want to downloaded the latest version along with all of the demos you can get it over at the CFMU Project Page on RIAForge

This entry was posted on August 16, 2009 at 3:05 PM and has received 3056 views. Comments 8 | Print this entry.

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment] [Subscribe to Comments]

#1 by Ken Smith on 8/17/09 - 10:56 AM

Great! Love it! Thanks so much for this and for your help.
#2 by Brendan Canty on 8/18/09 - 1:58 PM

First off, this uploader is great, I'm enjoying playing with and trying to get it to work in my environment.

One small question I have, the onComplete method returns the name of the file, but it is returning the name of the file that the user uploaded, not necessarily the name of the file on the server, since cffile is using "nameconflict='makeunique'".

Is there an easy way to have the onComplete method become aware of the eventual filename on the server?
#3 by Dan Vega on 8/20/09 - 6:13 PM

Because it is on the server I don't think there is really anything I can do but I will look into for you. One option you could upload to a temp directory, read that directory and compare the results with the list of files and then move them to where you want them to go.
#4 by Newton C. on 3/28/10 - 6:36 PM

Hi Dan,

I love what you have done! This is one of a kind.
Even though CF9 has a multifile upload tag cffileupload, I still like yours.

I have a problem though. I wanted to implement maxFiles and maxFileSize on oncompleteAdv, but once I add those attributes they do not work. Have you tried it?

Please give me a solution.

Thank you in advance.
#5 by Dan Vega on 3/30/10 - 8:20 AM

The max files and max file size have nothing to do with onComplete event that fires. The max attributes should stop the user from adding files that exceed that attribute. If max files are 10 they should not be allowed to add more than 10 files at a time. The on complete is an event that will fire after the files have been uploaded.
#6 by Newton C. on 4/1/10 - 9:18 PM

Yes, I know what you mean. That's what I wanted to do, restrict file no. and upload size each time, but when I add those attributes in oncompleteAdv, they do not work. I mean when I put MaxFiles= "5" and MaxFileSize = "100", I am still able to upload more than 5 files and bigger than 100 at a time.

I need a solution. Thank you.
#7 by Thomas Messier on 10/5/10 - 1:57 PM

Hey Dan,

I just checked CFMU out and thought it was pretty cool. One thing I was wondering is if there was any way to validate the file type uploaded. While the filters make it somewhat less likely that somebody would upload the wrong file type, they don't seem to be full-proof. If I type *.* in the browser window, it seems I can then select any type of file and upload it. The ideal would be to be able to restrict by MIME, either in a built-in way or by making it possible to return something from the uploader CFC that can be included in the onCompleteAll event so that we can do custom validation. Is there currently any way to do this that I'm missing, or is it not possible?
#8 by Hammergood on 12/15/10 - 8:04 AM

I have the follwing problem:

MSIE passes the cookies set by CF to the upload-cfc. So all SESSION Variables are available in the upload function.

However the other browsers will not send the cookie and so there is another session (other cfid/cftoken) than outside. How can I access the SESSION Variables oft the correct SESSION in the upload function of the upload-cfc?

Thanks for helping!

[Add Comment] [Subscribe to Comments]

Navigation

Search

Tags

Archives by Subject

Subscribe

Recent Comments

Blog Roll

CFMU Update: onCompleteAll

TweetBacks

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)