JSFiddle - React, Tailwind, and code Playground

by krystiangw

HTML

<script src="http://api.filepicker.io/v1/filepicker.js"></script>
<div class="container">
    <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>
</div>

CSS

td {
text-align: center;
padding: 20px;
background-color: #F6F6F6;
border: 1px dashed #666;
border-radius: 6px;
margin-bottom: 20px;
}

JavaScript

filepicker.setKey("AoQu5qaT6TBappacaeM40z");

$('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+"%)");
          }
        }
    );
   
});