Vechtsport Online Components for Magento 2

File Upload 

<div class="file-upload ">
    <input class="file-upload__input" id="file" type="file" name="file" accept=".pdf,.doc,.png" data-size="1024" />
    <label class="file-upload__wrapper" for="file">
        <span class="file-upload__label">
            Your file (pdf, doc, max 1 MB)
        </span>

        <span class="button file-upload__button" role="button" tabindex="0" aria-controls="file">
            Upload a file
        </span>

        <span class="file-upload__name" data-default-text="File not choosen" tabindex="0">
            File not choosen
        </span>
    </label>
</div>

<script src="/components/raw/file-upload/file-upload.js"></script>
 
<div class="file-upload {{ class }}">
    <input class="file-upload__input"
           id="{{ id }}"
           type="file"
           name="{{ input.name }}"
           accept="{{ input.formats }}"
           data-size="{{ input.size }}"
    />
    <label class="file-upload__wrapper" for="{{ id }}">
        <span class="file-upload__label">
            {{ labelText }}
        </span>

        {{ render '@button' button }}

        <span class="file-upload__name" data-default-text="{{ fileName }}" tabindex="0">
            {{ fileName }}
        </span>
    </label>
</div>

<script src="{{ static 'file-upload.js' }}"></script>
 
{
  "labelText": "Your file (pdf, doc, max 1 MB)",
  "fileName": "File not choosen",
  "id": "file",
  "input": {
    "name": "file",
    "formats": ".pdf,.doc,.png",
    "size": "1024"
  },
  "button": {
    "tag": "span",
    "class": "file-upload__button",
    "attributes": "role=\"button\" tabindex=\"0\" aria-controls=\"file\"",
    "text": "Upload a file"
  }
}
  • Content: 
    $file-upload__margin        : $spacer--medium !default;
$file-upload__font-size     : 14px !default;
$file-upload__button-padding: 0 $spacer--large !default;

.file-upload {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: $file-upload__margin;

    &__wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        position: relative;
    }

    &__input {
        @include visually-hidden();
    }

    &__label {
        display: flex;
        flex-basis: 100%;
        margin-bottom: $spacer;
        font-size: $file-upload__font-size;
    }

    &__name {
        font-size: $file-upload__font-size;
        margin-top: $file-upload__margin;

        @include mq($screen-s) {
            margin-left: $file-upload__margin;
            margin-top: 0;
        }
    }

    &__button {
        display: flex;
        align-items: center;
        margin-bottom: 0;
        padding: $file-upload__button-padding;
        width: 100%;

        @include mq($screen-s) {
            width: auto;
        }
    }
}
  • URL: /components/raw/file-upload/_file-upload.scss
  • Filesystem Path: build/components/02-elements/form/file-upload/_file-upload.scss
  • Size: 1.1 KB
  • Content: 
    'use strict';

(function FileUpload() {
  const components = [...document.querySelectorAll('.file-upload')];

  components.forEach(component => {
    const input = component.querySelector('.file-upload__input'),
          name   = component.querySelector('.file-upload__name'),
          button = component.querySelector('span[role="button"]');

    input.addEventListener('change', file => {
      const filePath = file.target.value,
            fileName = filePath.split('\\').pop();

      if (fileName) {
        name.textContent = fileName;
      }
      else {
        name.textContent = name.dataset.defaultText;
      }
      name.focus();
    });

    button.addEventListener('keypress', event => {
      if (event.which === 32 || event.which === 13) {
        input.click();
      }
    });
  });
})();
  • URL: /components/raw/file-upload/file-upload.js
  • Filesystem Path: build/components/02-elements/form/file-upload/file-upload.js
  • Size: 813 Bytes

There are no notes for this item.