title: Trouble getting filepicker.io drag-drop pane working using JavaScript API
body: <p>I'm having trouble getting my filepicker.io "drag-drop pane" working using javascript.  I already had the filepicker.io html widget working similar to: </p>
  
  <pre><code>&lt;input type="filepicker-dragdrop" data-fp-drag-class="filepicker_dragdrop"/&gt;
  </code></pre>
  
  <p>However, I'm having trouble calling filepicker.io from JavaScript.  When I drag a file into the 'div.filepicker_dragdrop' container, nothing happens.  Any thoughts?</p>
  
  <p>In my form .html.erb:</p>
  
  <pre><code>&lt;div class="filepicker_dragdrop"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>In my .css file:</p>
  
  <pre><code>.filepicker_dragdrop {
    padding: 8px;
    height: 100px;
    width: 100%;
    text-align: center;
    margin: auto;
    border: 1px dashed #aaa;
    border-radius: 5px;
    background-color: #fff;
  }
  </code></pre>
  
  <p>In my filepicker_dragdrop.js:</p>
  
  <pre><code>filepicker.makeDropPane($('.filepicker_dragdrop')[0], {
      multiple: true,
      dragEnter: function() {
          $(".filepicker_dragdrop").html("Drop to upload").css({
              'backgroundColor': "#E0E0E0",
              'border': "1px solid #000"
          });
      },
      dragLeave: function() {
          $(".filepicker_dragdrop").html("Drop files here").css({
              'backgroundColor': "#F6F6F6",
              'border': "1px dashed #666"
          });
      },
      onSuccess: function(fpfiles) {
          $(".filepicker_dragdrop").text("Done, see result below");
          $("#localDropResult").text(JSON.stringify(fpfiles));
      },
      onError: function(type, message) {
          $("#localDropResult").text('('+type+') '+ message);
      },
      onProgress: function(percentage) {
          $(".filepicker_dragdrop").text("Uploading ("+percentage+"%)");
      }
  });
  </code></pre>