To use the File Uploader you must first setup the configuration options for the module.

Most of the above options are self explanitory. But I will go through them one by one anyways.

1. Filecount:0=unlimited, 1 or greater limits the number of files to that exact amount. 

2. uploadType: there are only two possible values for this uploadStandardFiles and uploadImageFiles. If you are using Standard File uploading then you do not need to specify width, height thumb attributes. The only required fields are the ID, uploadType, filecount and most important relFilePath.

 
3.ID: the id of the record associated with the file.

4.relFilePath: This is relative to the root file path of where you want to store the file(s). 

5.max_width: If you have chosen the uploadType of uploadImageFiles then this will be the max_width of your image. If the image is larger than the max_width attribute value then it will resize the image to the size you have specified. 

6.max_height: If you have chosen the uploadType of the uploadImageFiles then this will be the max_height of your image. If the image is larger than the max_height attribute value then it will resize the the image to the size you have specified. 

7.thumb: If you want a thumbnail. Values are True or False. 

8.thumbRelFilePath: This is relative to the root file path of where you want to store the thumbnails. 

9.thumb_max_width: Same as image max_width except it's for the thumbnail. 

10.thumb_max_height: Same as image max_height except it'f for the thumbnail. 

11.callback: This is a javascript callback that will be called after the file(s) are uploaded. 

Now we convert our config to a query string object.

Next we place a link to our uploader in our form or document.

Upload document

Note: it is important that you keep the iframe class on the link.

Lastly we assign the jQuery fancybox to open our uploader dialog. I usually do this at the bottom of my document somewhere.

jQuery("a.uploader").fanncybox({
	'frameWidth':450,
    'frameHeight':390,
    'hideOnContentClick':false
});    

Advanced Techniques
Because you can specify a callback javascript function after upload is complete you can customize the script so that specific events happen after upload. I use this mostly to insert a relationship between the uploaded file and record into the database. But you can use it for all sorts of things like updating the current view after upload etc...

Here is an example of a some simple callback funtionality from another module I am working on for document management.

funtion updateDocument(data,fileIndex,fileList){
	//Data values available:
    /*Note: Case Sensetive
    	NEW_FILE = "name of the file"
        RELFILEPATH = "relative file path from server root";
        ID = ID of the record submitted to associate with.
        SUCCESS = did the transaction succeed of fail.
        fileIndex:Integar - An index of uploaded file in fileList array.
    /*
    var params = {
    filename:data.response[0].NEW_FILENAME,id:data.response{0}.ID}
    if(fileIndex != fileList.length-1){
    
jQuery.post(#actiopage#?action=addDocument',jQuery.param(params));}else{
jQuery.post('actionPage#?action=addDocument',jQuery.param(params),listUpdated);
	}
}
	function listUpdated(){
    	setTimeout(function(){
        	jQuery.fn.fancybox.close();
            var beginStr = ""; style='height:200px;'>";
            var endStr ="";
            var msg = begins Str = "Your Document was added. Click Close to maange your document."=endStr:
            jQuery.facebox(msg);
            
            jQuery(document.bind('close.facebox',function() {window.location.reload();
            });
        },1500);
}

The basic explanation here is updateDocument is the callback specified in the callback attribute. The callback will be passed the following values as params to your callback(data, fileIndex,fileList) 

The first thing I do is create a javascript abject called params. This is to pass to my jQuery.post that I am baout to call. I am setting the values that cam in from the data object. 

Next I am checking to see if this is the last file that is being uploaded. I am doing this because the callback get's called one time per file that is uploaded. So we must check to see if this is the last file or not so we can determine when we want to pass a clalnack to the jQuery.post.function.

Now we post the data to our action page passing the jQuery params. When we get to the last file that is being uploaded I am passing a callback listUpdated which will prompt the user that the document was added and allows the user to reload the document upon closing the facebox Addon dialog box.