<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"
}
}
$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 : url("../images/icons/delete.svg") !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();
}
}
&__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 {
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');
const name = component.querySelector('.file-upload__name');
const button = component.querySelector('span[role="button"]');
input.addEventListener('change', file => {
const filePath = file.target.value;
const 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