Preskočiť na hlavný obsah
Oficiálna stránka SK

Doména gov.sk je oficiálna

Toto je oficiálna webová stránka orgánu verejnej moci Slovenskej republiky. Oficiálne stránky využívajú najmä doménu gov.sk. Odkazy na jednotlivé webové sídla orgánov verejnej moci nájdete na tomto odkaze.

Táto stránka je zabezpečená

Buďte pozorní a vždy sa uistite, že zdieľate informácie iba cez zabezpečenú webovú stránku verejnej správy SR. Zabezpečená stránka vždy začína https:// pred názvom domény webového sídla.

Nová verzia ID-SK Frontend nahradzuje pôvodnú verziu. Dokumentáciu staršej verzie nájdete na ID-SK Elements

  1. ID-SK frontend
  2. File upload

File upload

Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</div>

Macro

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

{{ govukFileUpload({
  "id": "file-upload-1",
  "name": "file-upload-1",
  "label": {
    "text": "Upload a file"
  }
}) }}

File upload with hint text

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-2">
    Upload your photo
  </label>
  <span id="file-upload-2-hint" class="govuk-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
  </span>
  <input class="govuk-file-upload" id="file-upload-2" name="file-upload-2" type="file" aria-describedby="file-upload-2-hint">
</div>

Macro

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

{{ govukFileUpload({
  "id": "file-upload-2",
  "name": "file-upload-2",
  "label": {
    "text": "Upload your photo"
  },
  "hint": {
    "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
  }
}) }}

File upload with error message

(open in a new window)
Code

Markup

<div class="govuk-form-group govuk-form-group--error">
  <label class="govuk-label" for="file-upload-3">
    Upload a file
  </label>
  <span id="file-upload-3-hint" class="govuk-hint">
    Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto.
  </span>
  <span id="file-upload-3-error" class="govuk-error-message">
  <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <input class="govuk-file-upload govuk-file-upload--error" id="file-upload-3" name="file-upload-3" type="file" aria-describedby="file-upload-3-hint file-upload-3-error">
</div>

Macro

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

{{ govukFileUpload({
  "id": "file-upload-3",
  "name": "file-upload-3",
  "label": {
    "text": "Upload a file"
  },
  "hint": {
    "text": "Your photo may be in your Pictures, Photos, Downloads or Desktop folder. Or in an app like iPhoto."
  },
  "errorMessage": {
    "text": "Error message goes here"
  }
}) }}

File upload with value and attributes

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <label class="govuk-label" for="file-upload-4">
    Upload a photo
  </label>
  <input class="govuk-file-upload" id="file-upload-4" name="file-upload-4" type="file" value="C:\fakepath\myphoto.jpg" accept=".jpg, .jpeg, .png">
</div>

Macro

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

{{ govukFileUpload({
  "id": "file-upload-4",
  "name": "file-upload-4",
  "value": "C:\\fakepath\\myphoto.jpg",
  "label": {
    "text": "Upload a photo"
  },
  "attributes": {
    "accept": ".jpg, .jpeg, .png"
  }
}) }}

File upload with label as page heading

(open in a new window)
Code

Markup

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper"><label class="govuk-label" for="file-upload-1">
      Upload a file
    </label>
    </h1>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</div>

Macro

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

{{ govukFileUpload({
  "id": "file-upload-1",
  "name": "file-upload-1",
  "label": {
    "text": "Upload a file",
    "isPageHeading": true
  }
}) }}

File upload with optional form-group classes

(open in a new window)
Code

Markup

<div class="govuk-form-group extra-class">
  <label class="govuk-label" for="file-upload-1">
    Upload a file
  </label>
  <input class="govuk-file-upload" id="file-upload-1" name="file-upload-1" type="file">
</div>

Macro

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

{{ govukFileUpload({
  "id": "file-upload-1",
  "name": "file-upload-1",
  "label": {
    "text": "Upload a file"
  },
  "formGroup": {
    "classes": "extra-class"
  }
}) }}