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:

  1. onComplete - Called after each file finishes uploading
  2. onError - Called when a file upload errors out
  3. onUploadComplete - Called when all the files finish uploading
Demo currently unavailable.

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
1<html>
2<head>
3<script src="../../jQuery/js/jquery-1.3.2.min.js" type="text/javascript"></script>
4
5<!--- Our CSS for displaying callback results --->
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<InvalidTag>
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    <!--- This is where we will display results as each file is uploaded --->    
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
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.