tractor-beam/test/fixtures/index.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
    <link rel="stylesheet" type="text/css" href="index.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  </head>
  <body>
    <!-- File upload drop zone -->
    <div class="container">
      <div class="tractor-beam">
        <h2 class="tractor-beam-heading">
          Drop a folder here
        </h2>
        <center>
          <input type="file" id="file-input" multiple directory webkitdirectory allowdirs/>
        </center>
      </div>

      <div class="file-list">
        <ul class="files">
        </ul>
      </div>

      <!-- Upload queue file list -->
      <!-- Button to trigger upload -->
      <div style="display:flex;justify-content:center;align-items:center;">
        <div class="upload-button button button-primary" style="text-align:right;">
          Upload
        </div>
      </div>
      <!-- Progress bar -->
      <div class="progress hidden"></div>
    </div>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="tractorbeam.js"></script>

    <script id="file-template" type="text/template">
      <li class="file">
        <span class="path">filepath</span>
        <a href="javascript:void(0)" class="add fa fa-plus-circle hidden"></a>
        <a href="javascript:void(0)" class="skip fa fa-minus"></a>
      </li>
    </script>
    <script src="index.js"></script>
  </body>
</html>