File upload - Pole na nahratie súboru
Pole na nahratie súboru
Zdrojový kód
HTML
<div class="govuk-form-group file-upload-component js-enabled " data-module="govuk-fileUpload">
<h2 class="govuk-heading-m">Nahraj súbor</h2>
<div class="upload-container" aria-label="Sekcia nahrávania súborov" role="region">
<input class="govuk-file-upload just-file file-input" data-file-input id="fileInput" type="file" aria-describedby="uploadInstructions" hidden >
<div class="upload-box">
<label for="fileInput" aria-label="Nahratie súboru"></label>
<div class="upload-icon" aria-hidden="true">
<span class="material-icons" aria-hidden="true">cloud_upload</span>
</div>
<div class="upload-text" id="uploadInstructions">
<p class="govuk-body"><b>Zvoľte súbor a nahrajte ho</b></p>
<p class="govuk-body">alebo preneste zvolenú prílohu sem (max. veľkosť 10MB)</p>
</div>
<button class="govuk-button govuk-button__basic upload-button" aria-label="Pridať prílohu" >
<span class="material-icons" aria-hidden="true">add</span>
<span>Pridať prílohu</span>
</button>
</div>
</div>
</div>
Makro
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
label: {
text: "Upload a file"
}
}) }}Pole na nahratie súboru so súbormi
Otvoriť ukážku na novej záložke : pole na nahratie súboru so súbormi
Zdrojový kód
HTML
<div class="govuk-form-group file-upload-component js-enabled " data-module="govuk-fileUpload">
<h2 class="govuk-heading-m">Nahraj súbor</h2>
<div class="upload-container" aria-label="Sekcia nahrávania súborov" role="region">
<input class="govuk-file-upload just-file file-input" data-file-input id="fileInput" type="file" aria-describedby="uploadInstructions" hidden >
<div class="upload-box">
<label for="fileInput" aria-label="Nahratie súboru"></label>
<div class="upload-icon" aria-hidden="true">
<span class="material-icons" aria-hidden="true">cloud_upload</span>
</div>
<div class="upload-text" id="uploadInstructions">
<p class="govuk-body"><b>Zvoľte súbor a nahrajte ho</b></p>
<p class="govuk-body">alebo preneste zvolenú prílohu sem (max. veľkosť 10MB)</p>
</div>
<button class="govuk-button govuk-button__basic upload-button" aria-label="Pridať prílohu" >
<span class="material-icons" aria-hidden="true">add</span>
<span>Pridať prílohu</span>
</button>
</div>
<h2 class="govuk-heading-m">Nahrané súbory</h2>
<ul class="upload-files">
<li class="upload-file-box">
<span class="material-icons upload-file-icon" aria-hidden="true">article</span>
<div class="upload-file-content">
<span class="upload-file-content-filename">List_vlastníctva_obytny_orechova_Velke_Zaluzie_na...nazov_suboru_ale.csv</span>
<div class="upload-file-content-info">
<progress id="file" value="32" max="100"></progress>
<span id="progress-text">32%</span>
</div>
</div>
<button class="upload-close-button" onclick="this.parentNode.style.display = 'none'" class="upload-file-close-icon" aria-label="Zatvoriť súbor 1"><div class="material-icons" aria-hidden="true">close</div></button>
</li>
<li class="upload-file-box error">
<span class="material-icons upload-file-icon" aria-hidden="true">error</span>
<div class="upload-file-content">
<span class="upload-file-content-filename">List_vlastníctva_obytny_orechova_Velke_Zaluzie_na...nazov_suboru_ale.csv</span>
<span class="upload-file-content-info">Vyskytol sa problém pri nahrávaní</span>
</div>
<button class="upload-close-button" onclick="this.parentNode.style.display = 'none'" class="upload-file-close-icon" aria-label="Zatvoriť súbor 2"><div class="material-icons" aria-hidden="true">close</div></button>
</li>
</ul>
</div>
</div>
Makro
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
label: {
text: "Upload a file"
},
content: [
{
icon: "article",
filename:
"List_vlastníctva_obytny_orechova_Velke_Zaluzie_na...nazov_suboru_ale.csv",
progress: 32
},
{
icon: "error",
filename:
"List_vlastníctva_obytny_orechova_Velke_Zaluzie_na...nazov_suboru_ale.csv",
errorMessage: "Vyskytol sa problém pri nahrávaní"
}
]
}) }}Pole na nahratie súboru s chybou
Otvoriť ukážku na novej záložke : pole na nahratie súboru s chybou
Zdrojový kód
HTML
<div class="govuk-form-group file-upload-component govuk-form-group--error js-enabled " data-module="govuk-fileUpload">
<h2 class="govuk-heading-m">Nahraj súbor</h2>
<p id="undefined-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Chyba:</span> Veľkosť súboru musí byť menšia ako 10MB
</p>
<div class="upload-container" aria-label="Sekcia nahrávania súborov" role="region">
<input class="govuk-file-upload just-file file-input govuk-file-upload--error" data-file-input id="fileInput" type="file" aria-describedby="uploadInstructions" hidden >
<div class="upload-box">
<label for="fileInput" aria-label="Nahratie súboru"></label>
<div class="upload-icon" aria-hidden="true">
<span class="material-icons" aria-hidden="true">cloud_upload</span>
</div>
<div class="upload-text" id="uploadInstructions">
<p class="govuk-body"><b>Zvoľte súbor a nahrajte ho</b></p>
<p class="govuk-body">alebo preneste zvolenú prílohu sem (max. veľkosť 10MB)</p>
</div>
<button class="govuk-button govuk-button__basic upload-button" aria-label="Pridať prílohu" >
<span class="material-icons" aria-hidden="true">add</span>
<span>Pridať prílohu</span>
</button>
</div>
<h2 class="govuk-heading-m">Nahrané súbory</h2>
<ul class="upload-files">
<li class="upload-file-box">
<span class="material-icons upload-file-icon" aria-hidden="true">article</span>
<div class="upload-file-content">
<span class="upload-file-content-filename">List_vlastníctva_obytny_orechova_Velke_Zaluzie_na...nazov_suboru_ale.csv</span>
<div class="upload-file-content-info">
<progress id="file" value="32" max="100"></progress>
<span id="progress-text">32%</span>
</div>
</div>
<button class="upload-close-button" onclick="this.parentNode.style.display = 'none'" class="upload-file-close-icon" aria-label="Zatvoriť súbor 1"><div class="material-icons" aria-hidden="true">close</div></button>
</li>
<li class="upload-file-box error">
<span class="material-icons upload-file-icon" aria-hidden="true">error</span>
<div class="upload-file-content">
<span class="upload-file-content-filename">List_vlastníctva_obytny_orechova_Velke_Zaluzie_na...nazov_suboru_ale.csv</span>
<span class="upload-file-content-info">Vyskytol sa problém pri nahrávaní</span>
</div>
<button class="upload-close-button" onclick="this.parentNode.style.display = 'none'" class="upload-file-close-icon" aria-label="Zatvoriť súbor 2"><div class="material-icons" aria-hidden="true">close</div></button>
</li>
</ul>
</div>
</div>
Makro
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
errorMessage: {
text: "Veľkosť súboru musí byť menšia ako 10MB"
},
content: [
{
icon: "article",
filename:
"List_vlastníctva_obytny_orechova_Velke_Zaluzie_na...nazov_suboru_ale.csv",
progress: 32
},
{
icon: "error",
filename:
"List_vlastníctva_obytny_orechova_Velke_Zaluzie_na...nazov_suboru_ale.csv",
errorMessage: "Vyskytol sa problém pri nahrávaní"
}
]
}) }}Pole na nahratie súboru bez javascriptu
Otvoriť ukážku na novej záložke : pole na nahratie súboru bez javascriptu
Zdrojový kód
HTML
<div class="govuk-form-group file-upload-component" data-module="govuk-fileUpload">
<h2 class="govuk-heading-m">Nahraj súbor</h2>
<div class="upload-container" aria-label="Sekcia nahrávania súborov" role="region">
<input class="govuk-file-upload just-file file-input" id="fileInput" type="file" aria-describedby="uploadInstructions" >
</div>
</div>
Makro
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
enableJs: false
}) }}Pole na nahratie súboru bez javascriptu s chybou
Otvoriť ukážku na novej záložke : pole na nahratie súboru bez javascriptu s chybou
Zdrojový kód
HTML
<div class="govuk-form-group file-upload-component govuk-form-group--error" data-module="govuk-fileUpload">
<h2 class="govuk-heading-m">Nahraj súbor</h2>
<p id="undefined-error" class="govuk-error-message">
<span class="govuk-visually-hidden">Chyba:</span> Veľkosť súboru musí byť menšia ako 10MB
</p>
<div class="upload-container" aria-label="Sekcia nahrávania súborov" role="region">
<input class="govuk-file-upload just-file file-input govuk-file-upload--error" id="fileInput" type="file" aria-describedby="uploadInstructions" >
</div>
</div>
Makro
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
enableJs: false,
errorMessage: {
text: "Veľkosť súboru musí byť menšia ako 10MB"
}
}) }}Pole na nahratie súboru zakázané
Otvoriť ukážku na novej záložke : pole na nahratie súboru zakázané
Zdrojový kód
HTML
<div class="govuk-form-group file-upload-component js-enabled disabled " data-module="govuk-fileUpload">
<h2 class="govuk-heading-m">Nahraj súbor</h2>
<div class="upload-container" aria-label="Sekcia nahrávania súborov" role="region">
<input class="govuk-file-upload just-file file-input" data-file-input id="fileInput" type="file" aria-describedby="uploadInstructions" hidden disabled >
<div class="upload-box">
<label for="fileInput" aria-label="Nahratie súboru"></label>
<div class="upload-icon" aria-hidden="true">
<span class="material-icons" aria-hidden="true">cloud_upload</span>
</div>
<div class="upload-text" id="uploadInstructions">
<p class="govuk-body"><b>Zvoľte súbor a nahrajte ho</b></p>
<p class="govuk-body">alebo preneste zvolenú prílohu sem (max. veľkosť 10MB)</p>
</div>
<button class="govuk-button govuk-button__basic upload-button" aria-label="Pridať prílohu" disabled >
<span class="material-icons" aria-hidden="true">add</span>
<span>Pridať prílohu</span>
</button>
</div>
</div>
</div>
Makro
{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
{{ govukFileUpload({
label: {
text: "Upload a photo"
},
disabled: true
}) }}