cffileupload Tag - Event Handlers

Posted At : January 16, 2010 5:09 PM | Posted By : Kumar
Related Categories: ColdFusion 9, RIA

Continuing with exploring the new multi-file upload tag functionality in ColdFusion 9, this post will build on the previous post and add event handlers. We are able to work with 3 event handlers:

onComplete - Called after each file finishes uploading
onError - Called when a file upload errors out
onUploadComplete - Called when all the files finish uploading

Have a look at the Demo.
Lets take a look at the code.

The main changes are in our multi-file upload tag. In addition, I am using jQuery and CFmessagebox to show results of the event handlers.

view plain print about

<html>
<head>
<script src="../../jQuery/js/jquery-1.3.2.min.js" type="text/javascript"></script>

<!--- Our CSS for displaying callback results --->
<style type="text/css">
	#results{
		padding:5 5 5 5px;
	}
	
	.blue{
		color:blue;		
	}
	
	.red{
		color:red;
	}
</style>

<script>
	//Will be called when the file upload was successful
	function uploadSuccess(res){
		
		var newID = Math.floor(Math.random()*1001); //Generate random number
		//Append our success message to results Div
		$("#results").append('<span class="blue" id="id_' + newID + '">Uploaded File : ' + res.FILENAME + '</span> <br/>');
		//Hide the appended message then fade it in 
		$("#id_" + newID).hide().fadeIn();
	}
	
	function uploadError(res){
		var newID = Math.floor(Math.random()*101);
		$("#results").append('<span class="red" id="id_' + newID + '">Error Uploading File : ' + res.FILENAME + '</span> <br/>');
		$("#id_" + newID).hide().fadeIn();	
	}
	
	function allDone(){		
		ColdFusion.MessageBox.show('finalmsg');
	}
	
</script>

</head>
<body>
	
	<cffileupload
		name = "uploadDemo"
		url="uploadSelectedFiles2.cfm"
		progressbar="true"
		addButtonLabel = "Select File(s)"
		clearButtonLabel = "Clear"
		width="500"
		height="400"
		title="Multi File Upload Demo"
		maxUploadSize="1"
		maxFileSelect="10"
		extensionfilter="*.txt,*.jpg,*.png,*.doc"
		uploadButtonLabel="Upload"
		onComplete="uploadSuccess" 
		onError="uploadError"  
		onUploadComplete="allDone">
	
	<!--- This is where we will display results as each file is uploaded --->	
	<div id="results">
		
	</div>
	
	<cfmessagebox name="finalmsg" title="Done!!" type="alert" message="We are all Done!!" labelOK="OK" labelCancel="No" />

</body>

</html>

1  <html>
2  <head>
3  <script src="../../jQuery/js/jquery-1.3.2.min.js" type="text/javascript"></script>
4
5  
6  <style type="text/css">
7      #results{
8          padding:5 5 5 5px;
9      }
10
11      .blue{
12          color:blue;
13      }
14
15      .red{
16          color:red;
17      }
18  </style>
19
20  <script>
21      //Will be called when the file upload was successful
22      function uploadSuccess(res){
23
24          var newID = Math.floor(Math.random()*1001); //Generate random number
25          //Append our success message to results Div
26          $("#results").append('<span class="blue" id="id_' + newID + '">Uploaded File : ' + res.FILENAME + '</span> <br/>');
27          //Hide the appended message then fade it in
28          $("#id_" + newID).hide().fadeIn();
29      }
30
31      function uploadError(res){
32          var newID = Math.floor(Math.random()*101);
33          $("#results").append('<span class="red" id="id_' + newID + '">Error Uploading File : ' + res.FILENAME + '</span> <br/>');
34          $("#id_" + newID).hide().fadeIn();
35      }
36
37      function allDone(){
38          ColdFusion.MessageBox.show('finalmsg');
39      }
40
41  </script>
42
43  </head>
44  <body>
45
46      <cffileupload
47          name = "uploadDemo"
48          url="uploadSelectedFiles2.cfm"
49          progressbar="true"
50          addButtonLabel = "Select File(s)"
51          clearButtonLabel = "Clear"
52          width="500"
53          height="400"
54          title="Multi File Upload Demo"
55          maxUploadSize="1"
56          maxFileSelect="10"
57          extensionfilter="*.txt,*.jpg,*.png,*.doc"
58          uploadButtonLabel="Upload"
59          onComplete="uploadSuccess"
60          onError="uploadError"
61          onUploadComplete="allDone">
62
63      
64      <div id="results">
65
66      </div>
67
68      <cfmessagebox name="finalmsg" title="Done!!" type="alert" message="We are all Done!!" labelOK="OK" labelCancel="No" />
69
70  </body>
71
72  </html>

The JavaScript function uploadSuccess is called when a file finishes uploading and uploadError when an upload errors out. In both functions, a random integer is generated and jQuery is used to append a span element with that (hopefully) unique ID to the div and use some fancy animation to bring it into view. Our code to upload the files, remains the same.

view plain print about

<cffile action = "uploadAll" destination = "C:\temp\wwwroot\uploads\" nameConflict = "MakeUnique">

1 <cffile action = "uploadAll" destination = "C:\temp\wwwroot\uploads\" nameConflict = "MakeUnique">

ColdFusion provides us a simple and great implementation to provide users good feedback when implementing the multi-file upload functionality.

Comments (0) |

Print |

Send |

del.icio.us |

Digg It! |

Linking Blogs | 1294 Views

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

There are no comments for this entry.

[Add Comment] [Subscribe to Comments]