No notes defined.
<div class="file" data-file="No file chosen">
<input type="file" id="{{ id }}"
aria-describedby="{{ id ~ '-description' }}"
{% if name %}
name="{{ name }}"
{% endif %}
{% if value %}
value="{{ value }}"
{% endif %}
{% if disabled %}
disabled="disabled"
{% endif %}
{% if required %}
required="{{ required }}"
{% endif %}
{% if invalid %}
aria-invalid="{{ invalid }}"
{% endif %}
{% if multiple %}
multiple
{% endif %}
/>
<span id="{{ id ~ '-description' }}" class="file__button">{{ buttonText|default('Select your files here to upload') }}</span>
</div>
{% if help %}
<span class="help-text">{{ help }}</span>
{% endif %}
<div class="file" data-file="No file chosen">
<input type="file" id="file" aria-describedby="file-description" />
<span id="file-description" class="file__button">Select your files here to upload</span>
</div>
<span class="help-text">Allowed file formats: jpg, jpeg, png and gif. Maximum file size: 2 MB. Images must be larger than 744x465 pixels.</span>
{
"id": "file",
"help": "Allowed file formats: jpg, jpeg, png and gif. Maximum file size: 2 MB. Images must be larger than 744x465 pixels."
}
.file {
display: inline-flex;
position: relative;
flex-wrap: wrap;
align-items: center;
margin: .25rem 0 0;
.file__button {
@extend %button-secondary;
@include button;
@include button-small;
@include button-hover;
max-width: 100%;
margin: 0 .75rem 0 0;
padding: .4rem .75rem;
content: attr(data-text);
}
&::after {
@include theme('color', 'default-text-color', 'no-file-selected-text-color');
max-width: 100%;
margin: .5rem .5rem 0;
font-size: .7rem;
font-style: italic;
text-overflow: ellipsis;
content: attr(data-file);
overflow: hidden;
@include phablet {
margin: 0;
}
}
input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 1.4rem;
cursor: pointer;
opacity: 0;
&:disabled {
pointer-events: none;
+ .file__button {
@include button-disabled;
}
}
&:hover + .file__button,
&:focus + .file__button,
&:focus-within + .file__button {
@include theme('color', 'color-quaternary', 'button-secondary-hover-color');
background-size: 100% 100%;
}
&:active + .file__button {
@include theme('background-color', 'color-tertiary-pastel', 'button-secondary-active-background');
@include theme('color', 'color-primary', 'button-secondary-active-color');
background-image: none;
box-shadow: none;
}
&:focus + .file__button {
@include focus-bare;
}
}
+.help-text {
@include theme('color', 'help-text-color', 'help-text-color');
display: block;
margin-top: .5rem;
font-size: .7rem;
line-height: 1.2rem;
}
}
'use strict';
(function () {
if (!File) {
return;
}
const selected = document.querySelectorAll('.file');
for (let i = selected.length; i--;) {
new File(selected[i]);
}
})();
'use strict';
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
define(factory);
}
else {
if (typeof exports === 'object') {
module.exports = factory();
}
else {
root.File = factory();
}
}
}(this || window, function () {
return function (elem, options) {
const input = elem.querySelector('input[type="file"]');
if (!input) {
throw new Error('Element input[type="file"] not found.');
}
options = options || {};
/**
* Update the filename of the uploaded file.
*
* @param {Event} e
* Event object for the change event.
*
*/
const updateFile = e => {
if (!input.files.length) {
elem.dataset.file = options.emptyText || elem.dataset.emptyText || 'No file chosen';
return;
}
if (input.files.length > 1) {
elem.dataset.file = options.multipleText || elem.dataset.multipleText || 'Multiple files';
return;
}
elem.dataset.file = input.files[0].name;
};
/**
* Initialize the FileUpload component
*/
const init = () => {
if (input.hasAttribute('multiple')) {
return;
}
input.addEventListener('change', updateFile);
updateFile();
};
init();
return {updateFile};
};
}));