<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