This is the code that is used to trigger Plupload in my Rails App:
<% content_for :deferred_js do %>
$("#uploader").pluploadQueue({
runtimes : 'gears,html5,flash,browserplus,silverlight,html4',
url : '/uploads.js',
//browse_button : 'pickfiles',
max_file_size : '10mb',
chunk_size : '2mb',
unique_names : false,
container: 'uploader',
autostart: true,
//RoR - make sure form is multipart
//multipart: true,
// Specify what files to browse for
filters : [
{title : "Image files", extensions : "jpg,gif,png,bmp"}
],
// PreInit events, bound before any internal events
preinit : {
UploadFile: function(up, file) {
up.settings.multipart_params = {"upload[stage_id]" : compv.steps.selectedStage.getID(), "authenticity_token" : compv.tools.csrf_token()};
}
},
// Post init events, bound after the internal events
init : {
FilesAdded: function(up, files) {
// Called when files are added to queue
up.start();
},
FileUploaded: function(up, file, info) {
// Called when a file has finished uploading
console.log('[FileUploaded] File:', file, "Info:", info);
info.responseText = info.response;
compv.updateStepView('upload', info);
$('tr[data-upload] td.selectable-step').each(function(index){
compv.steps.selectedUpload.primeUploadDisplay($(this));
});
},
Error: function(up, args) {
// Called when an error has occured
up.stop();
compv.tools.clientError();
}
},
// Flash settings
flash_swf_url : '/plupload/js/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url : '/plupload/js/plupload.silverlight.xap'
});
compv.steps.selectedUpload.uploader = $('div#uploader').pluploadQueue();
//compv.steps.selectedUpload.uploader.init();
// Client side form validation
$('form#new_upload').submit(function(e) {
var uploader = $('#uploader').pluploadQueue();
// Validate number of uploaded files
if (uploader.total.uploaded == 0) {
// Files in queue upload them first
if (uploader.files.length > 0) {
// When all files are uploaded submit form
uploader.bind('UploadProgress', function() {
if (uploader.total.uploaded == uploader.files.length)
$('form').submit();
});
uploader.start();
} else
$('div#upload-empty-dialog').dialog("open");
e.preventDefault();
}
});
$('div#upload-empty-dialog').dialog({modal:true, autoOpen: false, minWidth: 325, buttons: { "Ok": function() { $(this).dialog("close"); } }});
$('div#upload-cancel-dialog').dialog({modal:true, autoOpen: false, minWidth: 325});
<% end %>
<div class="dialog" id="upload-empty-dialog" title="No Files">
<p>You must select files to upload first.</p>
</div>
<div class="dialog" id="upload-cancel-dialog" title="Cancel Uploading?">
<p>Do you want to stop uploading these images? Any images which have not been uploaded will be lost.</p>
</div>
Is there anything obvious that jumps out that could be causing this ?
Edit1: Btw, when I try this upload form - http://jsfiddle.net/Atpgu/1/ - the add files button fires for me on both Chrome & FF - so I suspect it has something to do with my JS, I just don't know what.
Edit2: This is what the definition of compv
is. I know it's a bit verbose, and I was going to reduce it - but decided not to at the risk of removing something important.
var compv = {
exists: true,
tools: { exists: true,
csrf_param : null,
csrf_token : null},
comments: { exists: true,
updateView: null,
selectImage: null,
upvote:null,
downvote:null,
showVotes:null,
getUploadID: function(element){
return $(element).parents("li").attr("data-upload-id");
}},
steps: { exists: true,
selectFn:{},
selectedClass: "selected-step",
selectableClass: "selectable-step",
selectedClient: { element: null,
id: null,
stepType: "client",
ajaxSuccess: null },
selectedProject: { element: null,
id: null,
stepType: "project",
ajaxSuccess: null },
selectedStage: { element: null,
id: null,
stepType: "stage",
ajaxSuccess: null,
getID: function(){
return compv.steps.selectedStage.id;
},
displayCompare: function(){
window.open($(this).attr('data-url'), "_blank");
}},
selectedUpload: { element: null,
id: null,
stepType: "image",
primeUploadDisplay: null,
ajaxSuccess: null,
uploader: null,
noCloseDialog: false} }
};
Plupload is not rendering correctly for hidden elements, that is why it should be refreshed after shown. In given example, after DIALOG is opened, there should be added few lines of code:
var uploader = $('#uploader').pluploadQueue();
uploader.refresh();
I noticed, that in chrome, it has problems to set z-index correctly for input container. To workaround that, just add another line after previous two:
$('#uploader > div.plupload').css('z-index','99999');