Use the file upload component to help users select and upload one or more files.
There are two cases in which the file upload component can be used:
When the user should only be able to select and upload one file, the file upload component can be used as is. See the “default” example.
When the user should be able to select and upload one or more files, the file upload component is placed in a fieldset.
There are two ways of using and presenting the file upload component in a fieldset to upload one or more files:
The file upload component is a form element that should always be used in a form. For a description of the usage, the behavior, the layout and validation of form elements, see the form component documentation.
<section class="file-upload">
{% for i in 1..2 %}
<div class="form-item">
{% include '@form-label' with {
"label": itemLabel|replace({'%s': i}),
"for": id ~ '--' ~ _self.name ~ '--' ~ i,
} %}
<div class="form-columns">
<div class="form-item-column">
{% render '@file' with {
"id": id ~ '--' ~ _self.name ~ '--' ~ i,
"name": (name ~ '--' ~ _self.name ~ '--' ~ i)|default( id ~ '--' ~ _self.name ~ '--' ~ i),
} %}
</div>
<div class="form-item-column"></div>
</div>
</div>
{% endfor %}
{% render '@button' with {
text: 'Add attachment',
type: 'primary',
modifier: 'icon-plus'
} %}
</section>
<section class="file-upload">
<div class="form-item">
<label for="file-upload--stacked--1">Attachment 1 of 3
</label>
<div class="form-columns">
<div class="form-item-column">
<div class="file" data-file="No file chosen">
<input type="file" id="file-upload--stacked--1" aria-describedby="file-upload--stacked--1-description" name="--stacked--1" />
<span id="file-upload--stacked--1-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>
</div>
<div class="form-item-column"></div>
</div>
</div>
<div class="form-item">
<label for="file-upload--stacked--2">Attachment 2 of 3
</label>
<div class="form-columns">
<div class="form-item-column">
<div class="file" data-file="No file chosen">
<input type="file" id="file-upload--stacked--2" aria-describedby="file-upload--stacked--2-description" name="--stacked--2" />
<span id="file-upload--stacked--2-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>
</div>
<div class="form-item-column"></div>
</div>
</div>
<button type="button" class="button button-primary icon-plus ">
Add attachment
</button>
</section>
{
"id": "file-upload",
"label": "Attachments (max. 3)",
"itemLabel": "Attachment %s of 3"
}
.file-upload {
&.multiple {
.file {
&::after {
display: none;
}
}
.tag-list-wrapper {
margin-top: .25rem;
}
}
ul.inline, /// @deprecated since 4.0.0
.tag-list-wrapper {
margin-top: .8rem;
li {
margin-right: .4rem;
margin-bottom: .4rem;
}
}
.button {
margin-bottom: .8rem;
&:focus {
background-size: 100% 100%;
}
}
label {
margin-bottom: 0;
}
}