File upload explained and expanded
As we showed in our post File Upload with ColdFusion Flash Forms, file upload is now possible with Flash 8. I introduced it with a custom tag that nicely wraps the functionality of the file upload. It is quite flexible, -hopefully- easy to use, and I believe I’ll use it whenever I need to add a file field in my flash forms. But for those of you who are curious to know how it works, or need additional functionality (which I may add to the tag in the future), this is a walk through the main functions that make it work.
As we showed in our post File Upload with ColdFusion Flash Forms, file upload is now possible with Flash 8. I introduced it with a custom tag that nicely wraps the functionality of the file upload. It is quite flexible, -hopefully- easy to use, and I believe I’ll use it whenever I need to add a file field in my flash forms. But for those of you who are curious to know how it works, or need additional functionality (which I may add to the tag in the future), this is a walk through the main functions that make it work.
p>The swf file you will find in the zip contains the libraries that make file I/O possible. In order to have those available in our flash form, we load it in a textarea. Why not use a cfformitem type=”html”? Because at the moment, that type does not have an id attribute, so we cannot reference it later.Just so that we don’t have to escape the quotes, make a variable with the swf code:
The browse button will have the following:
//a reference to the swf
var uploadSwf = textArea.label.upload;
//make an empty object that will be the upload listener
var uploadListener = {};
//we'll add uploadListener to be a listener of the file upload events triggered by our library
uploadSwf.addListener(uploadListener);
//we are then ready to trigger the browse action. We can pass it some parameters such as the types of file we accept, and the description of these file types
uploadSwf.browse([{description: "Image Files", extension: "*.jpg;*.gif;*.png;"}]);
Our listener object can implement any of these functions, which will be called by the library after the browse has been triggered
- onSelect(file)
- onComplete()
- onProgress (fileRef, bytesLoaded, bytesTotal)
- onSecurityError(fileRef,errorString)
- onIOError(fileRef)
- onHTTPError(fileRef,errorNumber)
- onCancel()
this function will be called when a file has been selected by the user.
uploadListener.onSelect = function(selectedFile){}
Inside this function, it is our opportunity to check for file size or any other property:
- selectedFile.name
- selectedFile.size (in bytes)
- selectedFile.type
- selectedFile.creationDate
- selectedFile.modificationDate
We can also use these to show the selected file name in a text input.
onComplete will be called when the file has been uploaded
uploadListener.onComplete = function(){}
and the onProgress function is called while the file is uploaded to report progress
uploadListener.onProgress = function(fileRef, bytesLoaded, bytesTotal){}
We use that to make the progress bar and to show progress information.
Once we are set up and a file has been selected, we can call upload (most likely from an “upload” button):
uploadSwf.upload("upload.cfm");
We could append some variables to use in the action page.
uploadSwf.upload("upload.cfm?fileId=1");
We could also add a “Cancel” button with the following code to cancel the upload:
uploadSwf.cancel();