File upload - Pole na nahratie súboru

Pole na nahratie súboru

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group file-upload-component" data-module="govuk-fileUpload">

  <h2 class="govuk-heading-m">Nahraj subor</h2>
  <div class="upload-container" aria-label="File upload section" role="region">


  <input class="govuk-file-upload file-input " id="fileInput" type="file" aria-describedby="uploadInstructions" hidden  >
    <label for="fileInput" class="upload-box" aria-label="File upload box">
      <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ť 50MB)</p>
      </div>
      <button class="govuk-button govuk-button__basic upload-button" aria-label="Add attachment" >
        <span class="material-icons" aria-hidden="true">add</span>
        <span>Pridať prílohu</span>
      </button>
    </label>
  </div>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  label: {
    text: "Upload a file"
  }
}) }}

Pole na nahratie súboru default with error

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group file-upload-component govuk-form-group--error" data-module="govuk-fileUpload">

  <h2 class="govuk-heading-m">Nahraj subor</h2>
    <p id="undefined-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Veľkosť súboru musí byť menšia ako 10MB
  </p>
  <div class="upload-container" aria-label="File upload section" role="region">


  <input class="govuk-file-upload file-input govuk-file-upload--error " id="fileInput" type="file" aria-describedby="uploadInstructions" hidden  >
    <label for="fileInput" class="upload-box" aria-label="File upload box">
      <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ť 50MB)</p>
      </div>
      <button class="govuk-button govuk-button__basic upload-button" aria-label="Add attachment" >
        <span class="material-icons" aria-hidden="true">add</span>
        <span>Pridať prílohu</span>
      </button>
    </label>
  </div>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  errorMessage: {
    text: "Veľkosť súboru musí byť menšia ako 10MB"
  }
}) }}

Pole na nahratie súboru without javascript

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group file-upload-component js-enabled " data-module="govuk-fileUpload">

  <h2 class="govuk-heading-m">Nahraj subor</h2>
  <div class="upload-container" aria-label="File upload section" role="region">


  <input class="govuk-file-upload file-input  just-file " id="fileInput" type="file" aria-describedby="uploadInstructions" >
  </div>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  enableJs: true
}) }}

Pole na nahratie súboru without javascript with error

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group file-upload-component govuk-form-group--error js-enabled " data-module="govuk-fileUpload">

  <h2 class="govuk-heading-m">Nahraj subor</h2>
    <p id="undefined-error" class="govuk-error-message">
    <span class="govuk-visually-hidden">Error:</span> Veľkosť súboru musí byť menšia ako 10MB
  </p>
  <div class="upload-container" aria-label="File upload section" role="region">


  <input class="govuk-file-upload file-input govuk-file-upload--error  just-file " id="fileInput" type="file" aria-describedby="uploadInstructions" >
  </div>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  enableJs: true,
  errorMessage: {
    text: "Veľkosť súboru musí byť menšia ako 10MB"
  }
}) }}

Pole na nahratie súboru disabled

Otvoriť príklad na novej záložke

Code

Markup

<div class="govuk-form-group file-upload-component disabled " data-module="govuk-fileUpload">

  <h2 class="govuk-heading-m">Nahraj subor</h2>
  <div class="upload-container" aria-label="File upload section" role="region">


  <input class="govuk-file-upload file-input " id="fileInput" type="file" aria-describedby="uploadInstructions" hidden  disabled >
    <label for="fileInput" class="upload-box" aria-label="File upload box">
      <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ť 50MB)</p>
      </div>
      <button class="govuk-button govuk-button__basic upload-button" aria-label="Add attachment"  disabled >
        <span class="material-icons" aria-hidden="true">add</span>
        <span>Pridať prílohu</span>
      </button>
    </label>
  </div>
</div>

Macro

{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}

{{ govukFileUpload({
  label: {
    text: "Upload a photo"
  },
  disabled: true
}) }}