<form autocomplete="off">
  <div class="if input-wrapper">
    <input
      data-size="large"
      type="file"
      class="if drag-drop"
      multiple=""
      id="if-file-upload-anatomy-6"
      placeholder="Drop files here to upload"
    />
    <label for="if-file-upload-anatomy-6">Upload file</label>
    <button aria-hidden="true" type="button" class="if file-upload">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="if loader dots horizontal small"
        viewBox="0 0 64 64"
        width="32"
        height="32"
      >
        <circle cx="8" cy="32" r="8" fill="#0054f0"></circle>
        <circle cx="32" cy="32" r="8" fill="#0054f0"></circle>
        <circle cx="56" cy="32" r="8" fill="#0054f0"></circle>
        <style>
          .if.loader.dots.horizontal circle {
            transform: scale(0);
            animation: ifAnimationLoaderHorizontal 1.15s infinite ease-in-out;
            transform-origin: 56px 32px;
          }
          .if.loader.dots.horizontal circle:nth-child(1) {
            animation-delay: -0.32s;
            transform-origin: 8px 32px;
          }
          .if.loader.dots.horizontal circle:nth-child(2) {
            animation-delay: -0.16s;
            transform-origin: 32px 32px;
          }
          @-moz-keyframes ifAnimationLoaderHorizontal {
            0%,
            80%,
            100% {
              transform: scale(0);
            }
            40% {
              transform: scale(1);
            }
          }
          @-webkit-keyframes ifAnimationLoaderHorizontal {
            0%,
            80%,
            100% {
              transform: scale(0);
            }
            40% {
              transform: scale(1);
            }
          }
          @-o-keyframes ifAnimationLoaderHorizontal {
            0%,
            80%,
            100% {
              transform: scale(0);
            }
            40% {
              transform: scale(1);
            }
          }
          @keyframes ifAnimationLoaderHorizontal {
            0%,
            80%,
            100% {
              transform: scale(0);
            }
            40% {
              transform: scale(1);
            }
          }
        </style>
      </svg>
      <svg
        class="if icon"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 32 32"
      >
        …
      </svg>
      <span class="if">
        Drop files here to upload
        <br />
        <span class="if fake-link text-meta">Or select files to upload</span>
      </span>
    </button>
    <div class="if uploaded-files"></div>
  </div>
</form>

<script src="../file-upload.iife.js"></script>
<script>
  IDSFileUpload.init();
</script>

import { init as IDSFileUpload } from '@ids-js/file-upload';
IDSFileUpload();