Multiple JqueryFileUpload instances & stopping the document's file drop

Question

I have setup a page where multiple instances of the jQuery File Upload plugin can be added by clicking a button. The problem I'm having is when you drag files to one of the instances, it adds them to all. I've added the code suggested by the developer to keep this from happening, but it seems to have no effect (though the function is called, I have it logging to console.)

Here's the page I'm working on: http://bwobst.clients.thomporter.com/upload.html

Here's the JavaScript file that creates the uploaders: http://bwobst.clients.thomporter.com/upload.js

Or if you prefer, the CoffeeScript: http://bwobst.clients.thomporter.com/upload.coffee

FYI, this is the bit of code the developer suggests to use:

$(document).bind('drop dragover', function(e) {
  e.preventDefault();
});

As I said, I tried adding a console.log to it, and it did indeed get called when I dragged files to the window, but the e.preventDefault() seems to have had no effect.

Answer 1

as said in the documentation you have to specify a dropZone, otherwise its the whole document. you should change this line:

$('#uploader' + uploaderCount).fileupload();

to

$('#uploader' + uploaderCount).fileupload({dropZone:$('#uploader' + uploaderCount)});