Bug with Multiple <cffileupload> Controls and Different onComplete Handlers
A co-worker of mine has been bashing her head against a wall in recent days trying to figure out why a view with multiple <cffileupload> controls wasn't behaving properly. No matter what she did, a page with multiple <cffileupload> controls that also specified a different onComplete handler for each control always caused the last onComplete handler to be fired. She even made sure to have unique names for each file upload control.
It turns out that this is a completely reproducible bug in ColdFusion 9. Here's how you can replicate this bug:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>cffileupload Bug Test</title>
<script language="javascript">
<!--
function uploadOneDone() {
alert("uploadOneDone called");
}
function uploadTwoDone() {
alert("uploadTwoDone called");
}
//--> </script>
</head>
<body>
<p>Upload One, calls uploadOneDone() when finished.</p>
<p><cffileupload url="upload.cfm" name="uploader1" onComplete="uploadOneDone" /></p>
<p>Upload Two, calls uploadTwoDone() when finished.</p>
<p><cffileupload url="upload.cfm" name="uploader2" onComplete="uploadTwoDone" /></p>
</body>
</html>
You'll need a file called upload.cfm in the same directory as this test page. It can be as simple as:
Upload a file using the first uploader on the page. Here is the result you'll get:
The last onComplete handler is fired, no matter how many of the controls are added to the page.
Maybe we're doing something wrong here, and if we are, I'd love to know. In the meantime, I've opened this as bug #82396 in the ColdFusion bug tracker. Feel free to vote for it!
-Dan
One workaround that my co-worker came up with was to -- gulp -- use an iframe to insert each of the multiple cffileupload controls on the page. Not elegant, but it works.