javascript - blueimp jquery upload : drag and drop submitting all file fields -

i'm having small problem implementing blueimp's jquery upload.

i have form includes several different file fields uploading.

    <div id="file1">     <input class="fileupload" type="file" name="files[]" data-url="jqueryfileupload.php?pic=1">              <div  class="dropzone fade well" data-url="jqueryfileupload.php?pic=1">drop files here</div>     <div class="progress">         <div class="bar" style="width: 0%;"></div>     </div>     <input type="text" name="pic1"  id="pic1" value=""> </div> <div id="file2">     <input class="fileupload" type="file" name="files[]" data-url="jqueryfileupload.php?pic=2">              <div  class="dropzone fade well" data-url="jqueryfileupload.php?pic=2">drop files here</div>     <div class="progress">         <div class="bar" style="width: 0%;"></div>     </div>     <input type="text" name="pic2"  id="pic2" value=""> </div>  <script> $(function () { $('.fileupload').fileupload({     datatype: 'json',     done: function (e, data) {         $.each(data.result.files, function (index, file) {             var filename = file.name;             var pic = file.pic;            $('#pic'+pic).val(filename);          });     },     progressall: function (e, data) {     var progress = parseint(data.loaded / data.total * 100, 10);     $('.progress').show();     $('.progress .bar').css(         'width',         progress + '%'     );  } }); }); </script> 

when user uses browse button choose file submits correctly upload file handler script jqueryfileupload.php, including reference number of file field...

once handler script stuff image manipulation passes file name , relevant file number javascript function , file name added text field... each file upload has own text field (pic1, pic2 etc).

this works great.

my problem if user drags , drops file onto dropzone, of file fields submitted dropped file.

if use browse button see in firebug single ajax call upload handler page. if drag , drop see multiple calls:

jqueryfileupload.php?pic=1 jqueryfileupload.php?pic=2 

and text fileds filled in file name.

how can specify dropzone trigger? or, worst case, how can disable drag , drop entirely?

for latter tried adding

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

as per documentation, didn't seem have effect.. dropped files still uploaded...

to disable drag , drop entirely, set dropzone option empty jquery collection in fileupload() call:

$('.fileupload').fileupload({     dropzone: $(),     ... }); 

to create multiple dropzones, each own drag , drop context, iterate on .fileupload inputs, , call fileupload() on each one, passing own dropzone:

$('.fileupload').each(function () {     $(this).fileupload({         dropzone: $(this)     }); });