How to create multiple drop pane on same page using filepicker.io

Question

Basically I have a table and each rows have a Image icon which I want to turn into a drop pane. Any example code will be helpful.

Answer 1

Working example: http://jsfiddle.net/krystiangw/mb4o7kfc/1/

Js file:

$('td').each(function(e, element){

    filepicker.makeDropPane(
        element, 
        {
          multiple: true,
          dragEnter: function() {
            $(element).html("Drop to upload").css({
              'backgroundColor': "#E0E0E0",
              'border': "1px solid #000"
            });
          },
          dragLeave: function() {
            $(element).html("Drop files here").css({
              'backgroundColor': "#F6F6F6",
              'border': "1px dashed #666"
            });
          },
          onSuccess: function(Blobs) {

            $(element).text(JSON.stringify(Blobs));
          },
          onError: function(type, message) {
            $(element).text('('+type+') '+ message);
          },
          onProgress: function(percentage) {
            $(element).text("Uploading ("+percentage+"%)");
          }
        }
    );

});

Html file:

<table id="myTable" class="table table-bordered">     
  <tr>
    <th>
        Drag&drop panel
    </th>
  </tr>
    <tr>
    <td>
        Drop files here
    </td>
  </tr>
    <tr>
    <td>
        Or here
    </td>
  </tr>
    <tr>
    <td>
        Or here
    </td>
  </tr>
</table>