For the form upload, there is no state for confirmation, as the uploaded files are listed as form files and the result is then displayed there as well.
In its current form, this component is not accessible, as the button can be selected via keyboard but has no function. Possible solution: Place the input element with the type file inside the button itself.
<!-- Default -->
<div class="formUpload">
<label class="label is-optional" for="field-formUpload-uniqueID">Bezeichnung</label>
<div class="formUpload-button">
<button class="button"><svg class="icon is-upload-simple">
<use href="../../icons/icons.svg#icon--upload-simple" xlink:href="../../icons/icons.svg#icon--upload-simple"></use>
</svg>
<span class="button-label">Bezeichnung</span></button>
<input type="file" id="field-formUpload-uniqueID" name="upload" value="" data-parsley-errors-container="#parsley-errors-container-formUpload-uniqueID" />
</div>
<div class="formMessage js-formValidator-message">
Es können nur JPG-Dateien hochgeladen werden.
</div>
</div>
<!-- Disabled -->
<div class="formUpload is-disabled">
<label class="label is-optional" data-disabled="true" for="field-formUpload-disabled-uniqueID">Bezeichnung</label>
<div class="formUpload-button">
<button class="button" disabled="disabled"><svg class="icon is-upload-simple">
<use href="../../icons/icons.svg#icon--upload-simple" xlink:href="../../icons/icons.svg#icon--upload-simple"></use>
</svg>
<span class="button-label">Bezeichnung</span></button>
<input type="file" id="field-formUpload-disabled-uniqueID" name="upload" value="" disabled="disabled" data-parsley-errors-container="#parsley-errors-container-formUpload-disabled-uniqueID" />
</div>
<div class="formMessage js-formValidator-message">
Dieses Angaben können nicht geändert werden.
</div>
</div>
<!-- invalid -->
<div class="formUpload is-invalid">
<label class="label is-optional is-invalid" for="field-formUpload-invalid-uniqueID">Bezeichnung</label>
<div class="formUpload-button">
<button class="button"><svg class="icon is-upload-simple">
<use href="../../icons/icons.svg#icon--upload-simple" xlink:href="../../icons/icons.svg#icon--upload-simple"></use>
</svg>
<span class="button-label">Bezeichnung</span></button>
<input type="file" id="field-formUpload-invalid-uniqueID" name="upload" value="" data-parsley-errors-container="#parsley-errors-container-formUpload-invalid-uniqueID" />
</div>
<div class="formMessage js-formValidator-message">
Ich bin die Fehlerbeschreibung.
</div>
</div>
<div class="formUpload{{#if is-required}} is-required{{/if}}{{#if is-disabled}} is-disabled{{/if}}{{#modifier}} {{{.}}}{{/modifier}}">
{{> @label}}
<div class="formUpload-button">
{{#button}}
{{render '@button' (contextData '@formupload' this) merge=true}}
{{/button}}
<input type="file" id="field-{{id}}" name="{{name}}" value="{{{value}}}"{{#if is-disabled}} disabled="disabled"{{/if}}{{#if is-required}} required=""{{/if}}{{#max-file-size}} data-parsley-max-file-size="{{.}}"{{/max-file-size}}{{#file-types}} data-parsley-file-types="{{.}}"{{/file-types}} data-parsley-errors-container="#parsley-errors-container-{{id}}"/>
</div>
{{#message}}
{{render '@formmessage' (contextData '@formupload' this) merge=true}}
{{/message}}
</div>
/* Default */
{
"id": "formUpload-uniqueID",
"name": "upload",
"label": "Bezeichnung",
"button": {
"cta": "Datei auswählen",
"icon": {
"id": "upload-simple"
}
},
"message": {
"content": "Es können nur JPG-Dateien hochgeladen werden."
}
}
/* Disabled */
{
"id": "formUpload-disabled-uniqueID",
"name": "upload",
"label": "Bezeichnung",
"button": {
"cta": "Datei auswählen",
"icon": {
"id": "upload-simple"
},
"is-disabled": true
},
"message": {
"content": "Dieses Angaben können nicht geändert werden."
},
"is-disabled": true
}
/* invalid */
{
"id": "formUpload-invalid-uniqueID",
"name": "upload",
"label": "Bezeichnung",
"button": {
"cta": "Datei auswählen",
"icon": {
"id": "upload-simple"
}
},
"message": {
"content": "Ich bin die Fehlerbeschreibung."
},
"modifier": "is-invalid"
}
@import "_formUpload.settings";
@import "_formUpload.styles";
%formUpload {
&-button {
.button {
@extend %button--alt--secondary;
}
}
}
$formUpload_styles: (
) !default;
%formUpload {
@include stack-spacing();
@include field-stacking();
@include styles($formUpload_styles);
.label {
@include stack-spacing(0);
}
&-button {
display: inline-block;
position: relative;
input { // Visually hide generic upload button
position: absolute;
top: 0; left: 0;
display: block;
width: 100%; height: 100%;
color: transparent;
cursor: pointer;
overflow: hidden;
opacity: 0;
&::-webkit-file-upload-button {
visibility: hidden;
}
&:focus {
outline: transparent;
}
}
.button {
@extend %button--secondary;
@include stack-spacing(0);
}
.is-disabled .button,
*[data-status="uploading"] .button {
@include state-styles($button-states--secondary, disabled);
cursor: not-allowed;
}
.is-disabled & input {
cursor: not-allowed;
pointer-events: none;
}
*[data-status="uploading"] .button {
@include state-styles($button-states--secondary, disabled);
cursor: wait;
}
*[data-status="uploading"] & input {
cursor: wait;
pointer-events: none;
}
}
}
.formUpload {
@extend %formUpload !optional;
&-button {
@extend %formUpload-button;
}
}