<div class="file-upload file-upload--native button-extend">
    <div class="file-upload__wrapper" data-role="send-files">
        <label tabindex="0" for="file">
            <input id="file" type="file" name="file" accept=".pdf,.doc,.png" data-size="1024" />
            Your file (pdf, doc, max 1 MB)
        </label>
    </div>
    <div class="file-upload__attachments">
        <div data-role="attached-item">
            <span>
                some-file.jpg
            </span>
            <button type="button" data-role="delete-button">
                <span>
                    Delete
                </span>
            </button>
        </div>
        <div data-role="attached-item">
            <span>
                some-file.jpg
            </span>
            <button type="button" data-role="delete-button">
                <span>
                    Delete
                </span>
            </button>
        </div>
    </div>
</div>
<div class="file-upload {{ class }}">
    <div
        class="file-upload__wrapper"
        data-role="send-files"
    >
        <label
            tabindex="0"
            for="{{ id }}"
        >
            <input
                id="{{ id }}"
                type="file"
                name="{{ input.name }}"
                accept="{{ input.formats }}"
                data-size="{{ input.size }}"
            />
            {{ labelText }}
        </label>
    </div>
    {{#if attachments }}
        <div class="file-upload__attachments">
            {{#each attachments }}
                <div
                    data-role="attached-item"
                >
                    <span>
                        {{ fileName }}
                    </span>
                    <button
                        type="button"
                        data-role="delete-button"
                    >
                        <span>
                            {{ buttonText }}
                        </span>
                    </button>
                </div>
            {{/each }}
        </div>
    {{/if}}
</div>
{
  "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"
  },
  "class": "file-upload--native button-extend",
  "attachments": [
    {
      "fileName": "some-file.jpg",
      "buttonText": "Delete"
    },
    {
      "fileName": "some-file.jpg",
      "buttonText": "Delete"
    }
  ]
}
  • 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