Back to File Upload-guidelines

JavaScriptThe latest version of this package is: 0.17.4, Opens in new window

File Upload javascript

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-js/file-upload@0.17.4

Table of Contents

Usage

Drag and drop

<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

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

Module

import { init as IDSFileUpload } from '@ids-js/file-upload';
IDSFileUpload();
Contact us, Opens in new window