cruc components for Magento 2

File Upload: Default 

<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                               : $font-size-base !default;
$file-upload__button-padding                          : 0 $spacer--large !default;
$file-upload__label-margin--native                    : 0 !default;

$file-upload__attachments-label-margin                : 0 $spacer 0 0 !default;
$file-upload__attachments-button-padding              : 0 !default;
$file-upload__attachments-button-background           : none !default;

$file-upload__attachments-button-content              : none !default;
$file-upload__attachments-button-icon-left            : calc(50% - 12px) !default;
$file-upload__attachments-button-icon-top             : calc(50% - 12px) !default;
$file-upload__attachments-button-icon-width           : 24px !default;
$file-upload__attachments-button-icon-height          : 24px !default;
$file-upload__attachments-button-icon-padding         : 0 !default;
$file-upload__attachments-button-icon-opacity         : 1 !default;
$file-upload__attachments-button-icon-transform       : translateY(0) !default;
$file-upload__attachments-button-icon-transform--hover: rotate(180deg) !default;
  • URL: /components/raw/file-upload/_file-upload-variables.scss
  • Filesystem Path: build/components/Molecules/form/file-upload/_file-upload-variables.scss
  • Size: 1.2 KB
  • Content: 
    @import 'file-upload-variables';

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

    &--native {
        input {
            @include visually-hidden();
        }
        
        label {
            @extend .button;
            margin: $file-upload__label-margin--native;
        }
    }

    &__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;
        }
    }

    &__attachments {
        [data-role="attached-item"] {
            display: flex;
            align-items: center;

            & > span {
                @extend .label;
                margin: $file-upload__attachments-label-margin;
            }
        }

        [data-role="delete-button"] {
            padding: $file-upload__attachments-button-padding;
            background: $file-upload__attachments-button-background;

            &:after {
                content: $file-upload__attachments-button-content;
                left: $file-upload__attachments-button-icon-left;
                top: $file-upload__attachments-button-icon-top;
                width: $file-upload__attachments-button-icon-width;
                height: $file-upload__attachments-button-icon-height;
                padding: $file-upload__attachments-button-icon-padding;
                opacity: $file-upload__attachments-button-icon-opacity;
                transform: $file-upload__attachments-button-icon-transform;
            }

            &:hover {
                &:before {
                    display: none;
                }

                &:after {
                    transform: $file-upload__attachments-button-icon-transform--hover;
                }
            }

            span {
                display: none;
            }
        }
    }
}
  • URL: /components/raw/file-upload/_file-upload.scss
  • Filesystem Path: build/components/Molecules/form/file-upload/_file-upload.scss
  • Size: 2.5 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/Molecules/form/file-upload/file-upload.js
  • Size: 813 Bytes

File upload

file-upload–native

This component is present in Magento B2B modules. To avoid overriding .js files in theme we are using original html structure for file input and attachments