<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"
}
]
}
$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;
@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;
}
}
}
}
'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();
}
});
});
})();
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