title: blueimp jquery upload : drag and drop submitting all file fields
body: <p>i'm having a small problem implementing Blueimp's Jquery Upload.</p>
  
  <p>i have a form which includes several different file fields for uploading.</p>
  
  <pre><code>    &lt;div id="file1"&gt;
      &lt;input class="fileupload" type="file" name="files[]" data-url="jQueryFileUpload.php?pic=1"&gt;         
      &lt;div  class="dropzone fade well" data-url="jQueryFileUpload.php?pic=1"&gt;Drop files here&lt;/div&gt;
      &lt;div class="progress"&gt;
          &lt;div class="bar" style="width: 0%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;input type="text" name="pic1"  id="pic1" value=""&gt;
  &lt;/div&gt;
  &lt;div id="file2"&gt;
      &lt;input class="fileupload" type="file" name="files[]" data-url="jQueryFileUpload.php?pic=2"&gt;         
      &lt;div  class="dropzone fade well" data-url="jQueryFileUpload.php?pic=2"&gt;Drop files here&lt;/div&gt;
      &lt;div class="progress"&gt;
          &lt;div class="bar" style="width: 0%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;input type="text" name="pic2"  id="pic2" value=""&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(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 + '%'
      );
  
  }
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>when a user uses the browse button to choose a file it submits it correctly to the upload file handler script jQueryFileUpload.php, including the reference number of the file field...</p>
  
  <p>once the handler script does its stuff with image manipulation it passes the file name and the relevant file number back to the javascript function and the file name is added to a text field... each file upload has its own text field (pic1, pic2 etc).</p>
  
  <p>this all works great.</p>
  
  <p>my problem is that if the user drags and drops a file onto the dropzone, ALL of the file fields get submitted with the dropped file.</p>
  
  <p>if i use the browse button i see in firebug a single ajax call to the upload handler page.
  if i drag and drop i see multiple calls:</p>
  
  <pre><code>jQueryFileUpload.php?pic=1
  jQueryFileUpload.php?pic=2
  </code></pre>
  
  <p>and all the text fileds get filled in with file name.</p>
  
  <p>how can i specify which dropzone to trigger?
  or, worst case, how can i disable drag and drop entirely?</p>
  
  <p>for the latter i tried adding </p>
  
  <pre><code>$(document).bind('drop dragover', function (e) {
  e.preventDefault();
  });
  </code></pre>
  
  <p>as per the documentation, but this didn't seem to have any effect.. dropped files were still uploaded...</p>