Hi I'm working with uploader and think it's a great product. However I'm having a problem when I use it in firefox. The browser loads and I am able to select files but when I go to upload the files nothing happens. it seems that the program stalls. The fileCB and postCB function fire but it looks as ifI the uploadCB: function never fires. Here is the code that I am using. Thanks.
J
<!--- coldfusion code that deals with the form --->
<cfobject component="#application.cfcpath#portfolioImage" name="request.image">
<CFIF IsDefined("URL.RecordID")>
<CFINVOKE COMPONENT="#application.cfcpath#portfolioImage" METHOD="GetDetail" RETURNVARIABLE="GetRecord" RecordID="#URL.RecordID#"></CFINVOKE>
<cfparam name="RecordDefined" default="true">
<CFELSE>
<cfparam name="RecordDefined" default="false">
</CFIF>
<CFIF IsDefined("URL.catId")>
<cfparam name="GetRecord.catID" default="#URL.catID#">
<CFELSE>
<cfparam name="GetRecord.catID" default="">
</CFIF>
<cfparam name="GetRecord.orderId" default="#request.image.nextOrder()#">
<cfparam name="GetRecord.startImage" default="">
<cfparam name="GetRecord.name" default="">
<cfparam name="GetRecord.imageWidth" default="">
<cfparam name="GetRecord.imageHeight" default="">
<cfparam name="GetRecord.thumbWidth" default="">
<cfparam name="GetRecord.thumbHeight" default="">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>Portfolio - Edit Record</TITLE>
<link rel="stylesheet" href="../../common/css/admin.css" type="text/css">
</HEAD>
<BODY>
<cfoutput>
<FORM action="" name="infoForm" id="infoForm" method="post">
<INPUT type="hidden" id="catID" value="#GetRecord.catID#">
<INPUT type="hidden" id="imageName" value="#GetRecord.name#">
<INPUT type="hidden" id="new_imageName" value="">
<INPUT type="hidden" id="imageWidth" value="#GetRecord.imageWidth#">
<INPUT type="hidden" id="imageHeight" value="#GetRecord.imageHeight#">
<INPUT type="hidden" id="thumbWidth" value="#GetRecord.thumbWidth#">
<INPUT type="hidden" id="thumbHeight" value="#GetRecord.thumbHeight#">
<cfif isDefined("URL.RecordID")>
<INPUT type="hidden" id="RecordID" value="#URL.RecordID#">
<INPUT type="hidden" id="imageId" value="#URL.RecordID#">
<CFELSE>
<INPUT type="hidden" id="RecordID" value="">
<INPUT type="hidden" id="imageId" value="">
</cfif>
</FORM>
</CFOUTPUT>
<cfoutput>
<div class="pageTitle">
<cfif IsDefined("URL.RecordID")>
<p><strong>#GetRecord.name# - edit</strong></p>
<cfelse>
<p><strong><a href="portfolioImage_view.cfm?catID=#URL.catID#&catName=#URL.ProjectName#">« #URL.ProjectName#</a> - add image</strong></p>
</cfif>
</div>
</cfoutput>
///////////////////////////////////////
///////
///
<!--- here is the uploader code --->
<div id="uploader"></div>
<div id="directions">
<p>To upload images click the browse button above or drag the your images into the file window. Max image width is <strong>680px</strong> Max image height is <strong>425px</strong></p>.
</div>
<!---div used for uploader debugging--->
<div id="results">RESULTS: </div>
<script type="text/javascript" src="http://bp.yahooapis.com/2.2.0/browserplus-min.js"></script>
<script type="text/javascript" src="http://bp.yahooapis.com/toolbox/uploader/1.0.6/uploader-min.js"></script>
<script type="text/javascript" src="http://l.yimg.com/a/lib/bp/s/1.75/json2.js"></script>
<script type="text/javascript">
var my = function() {
var results = document.getElementById("results");
var _imageName;
var orderID = <cfoutput>#GetRecord.orderId#</cfoutput>
return {
fileCB: function(res) {
var k, msg;
if (res.success) {
res.action = "select";
_imageName = res.name;
msg = "{id: " + res.id + ", action:" + res.action + ", name:" + res.name + ", size:" +
res.size + ", mimeType: " + res.mimeType + ", uuid:" + res.uuid + "}";
if (res.value) {
msg = "<b>--- RESULT(" + res.name + ") ---</b><br>" +
JSON.stringify(res.value).replace(/,/g, ",<br>") +
"<br>==============<br>" + msg;
}
} else {
msg = "<span style=\"color:red\">ERROR(" + res.id + "), upload failed: " +
res.error + " - " + res.verboseError + "</span>";
}
results.innerHTML = "<div>" + msg + "</div>" + results.innerHTML;
},
postCB: function(uuid) {
orderID = orderID + 1;
alert("postCB");
return {recordID: RecordID.value, catID: catID.value, imageName: imageName.value, new_imageName: _imageName, imageWidth: imageWidth.value, imageHeight: imageHeight.value, thumbWidth: thumbWidth.value, thumbHeight: thumbHeight.value, orderID: orderID+""};
},
uploadCB: function(res) {
alert('upload');
if (res.success) {
<cfoutput>
var _url = "portfolioImage_view.cfm?catID=#URL.catID#&ProjectName=#URL.ProjectName#";
</cfoutput>
//self.location = _url;
results.innerHTML = "<div style=\"color:#090\"><b>******** UPLOAD COMPLETE ********</b></div>" + results.innerHTML;
}
},
constraintCB: function(res) {
alert("Constraint Violation: " + res.constraint + " the maximum number of files you can upload at a time is " + _maxFiles);
/*results.innerHTML = "<div><span style=\"background:#f9e;\">Constraint Violation: " + res.constraint + "</span> file: " +
res.name + ", size: " + res.size + ", mimeType: " + res.mimeType + "</div>" + results.innerHTML;*/
}
};
}();
<CFOUTPUT>
if(#recordDefined#){
var _maxFiles = 1;
}else{
var _maxFiles = 10;
}
var _uploadURL = "portfolioImage_imageAction.cfm";
</CFOUTPUT>
BPTool.Uploader.create("uploader", {
uploadUrl: "portfolioImage_imageAction.cfm",
fileCB: my.fileCB,
postCB: my.postCB,
uploadCB: my.uploadCB,
constraintCB: my.constraintCB,
maxFiles: 10,
maxFileSize: 2000000,
mimeTypes: ["image/jpeg", "image/jpg"],
titleColor:"#000",
fileColor:"#666",
uploadBackground:"#fff",
fileBackground: "#fff",
hoverBackground: "#789",
selectBackground: "#e70",
progressBackground: "#123",
progressBarColor:"#e70",
footerBackground:"#59a9c7",
footerColor:"white"}).render();
</script>
</BODY>
</HTML>
