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 2831 views. Comments 8 | Print this entry.

CFMU Bug Fix - Using External Interface

08/04/2009 | ActionScript, CFMU, Flex | 7 Comments

In my CFMU project I am using the ExternalInterface class. This class allows your application to communicate with the flash players container, in this case the ColdFusion template and JavaScript. I originally was giving users the ability to define a JS function that would be called when all of the files were uploaded. I had a couple people email telling me that it was just not working how it should be. When they were uploaded files the JavaScript method was being called right away while the file uploads were still in progress.

As soon as I heard this I realized what I had done. Let's take a look at the following code. When a user selects some files for upload and clicks on the upload button the following method is called. The variable _files is an array collection that holds a list of File references. The File Reference class has a method upload that is used to push the file to a remote server. You will also notice that I add some event listeners to each file. This lets us monitor the progress of the upload and is important for the feature we are working. The problem here is that I am calling the external interface method after each file is sent for upload. This does not mean that the file has actually been uploaded, just that Flash has done it's part. So what would happen is the list of files would immediately show up right after the user clicked upload and this is not what we want. private function onUpload(event:MouseEvent):void { var request:URLRequest = new URLRequest(_uploadURL); var params:URLVariables = new URLVariables(); params.path = _uploadDir; request.method = URLRequestMethod.POST; request.data = params; for(var i:uint = 0; i < _files.length; ++i) { try { _files[i].addEventListener(Event.COMPLETE,uploadComplete); _files[i].addEventListener(ProgressEvent.PROGRESS,monitorProgress); _files[i].addEventListener(IOErrorEvent.IO_ERROR,handleError); _files[i].upload(request); } catch(e:Error) { // generic error handling Alert.show("Error: " + e); } } // call javascript method when done if a callback method was given if(callbackMethod != "" && callbackMethod != null){ if (ExternalInterface.available) { ExternalInterface.call(callbackMethod,_files); } } }

This entry was posted on August 4, 2009 at 9:46 AM and has received 3137 views. Comments 7 | Print this entry.

CFMU 1.0 Released

07/21/2009 | CFMU | 18 Comments

I am happy to announce the release of my CFMU project as its finally hit version 1.0. I was able to fix a couple bugs so I figured no time like the present to get this out. I was able to fix one bug that was forwarded to me by a user. The user was having an issue with the max file size, basically it just was not working. The problem was with the flash vars being passed into the application. Its important to note that flash vars are case sensitive when your reading them in. If you have a second and you have not checked out the project yet, please do and let me know your thoughts.

This entry was posted on July 21, 2009 at 12:43 AM and has received 3565 views. Comments 18 | Print this entry.

Ask An Addict: CFMU upload and insert

07/08/2009 | CFMU | 3 Comments

I got this question from a user so I thought I would share it with everyone.

Anyway, I downloaded your CFMU tag and think it's amazing. I'd really like to be able to make use of it but would need to know the names of the files it uploads for storing in a database etc. I've been scratching my head over the OnComplete Advanced example you gave in the documentation but my JavaScript is useless and my ColdFusion knowledge just isn't good enough to work out a different way!

First off thanks for the kind words! Ok so the on complete method is really there to be used as a callback method. This will allow you to call a javascript method after the files have been uploaded. While I guess you could use this to make Ajax calls to your backend and write to a database I think there is a better way to go about this. If you download the latest zip I have added a new example.

Remember that all the uploader tag does is push the file to a specific URL. This is the example code from my the demo upload and insert. As you can see there is a URL attribute. This is the URL that gets called everytime we upload a file. <cfmodule template="../cfmu/uploader.cfm" basePath="../cfmu/" id="myuploader" title="My Image Uploader" width="400" height="300" url="../demo/ImageHandler.cfc?method=upload" dir="#expandPath('.')#\images\"/>

So we know its going to call a component name ImageHandler.cfc and a method named upload. Basically Flash passes the filename through a form variable to our remote method. The same way that we use the form.filename field to upload the file, we can use it to insert the name into a database. This example is very basic but as you can see we are uploading the image and adding it to our database. You could even take this a step further and wrap it in a transaction so that if either fail you can just rollback. <cffunction name="upload" access="remote" output="false" returntype="void">  <cffile action="upload" filefield="Filedata" destination="#form.path#\#form.filename#" nameconflict="makeunique"/>  <cfquery name="addimage" datasource="mydsn"> INSERT INTO Images (filename) VALUES ('#form.filename#') </cfquery> </cffunction>

This entry was posted on July 8, 2009 at 11:12 PM and has received 2483 views. Comments 3 | Print this entry.

CFMU updated

07/08/2009 | CFMU | 0 Comments

I update my CFMU project to run on the latest Flex 4 framework which means you will need flash player 10 from now on. In the update I was able to fix a bug. If you are using the current project I suggest you update to the latest. If you had a list of files in the data grid and went to remove a file in the list it was removing the wrong one. Basically there was a problem with removing the wrong index. This was submitted to me by a user so thanks for the heads up!

This entry was posted on July 8, 2009 at 11:08 PM and has received 2078 views. Comments 0 | Print this entry.

Navigation

Search

Tags

Archives by Subject

Subscribe

Recent Comments

Blog Roll

CFMU Update: onCompleteAll

CFMU Bug Fix - Using External Interface

CFMU 1.0 Released

Ask An Addict: CFMU upload and insert

CFMU updated