File upload

The file upload allows users to upload files.

You should only ask users to upload something if it’s critical to the delivery of your service.

File upload with label and hint

Input

= f.govuk_file_field :profile_photo,
  label: { text: 'Identification photograph' },
  hint: { text: 'Upload a clear colour photograph of yourself looking straight at the camera' }

<%= f.govuk_file_field :profile_photo, label: { text: 'Identification photograph' }, hint: { text: 'Upload a clear colour photograph of yourself looking straight at the camera' } %>

Output

Upload a clear colour photograph of yourself looking straight at the camera

<div class="govuk-form-group">
  <label for="person-profile-photo-field" class="govuk-label">
    Identification photograph
  </label>
  <div class="govuk-hint" id="person-profile-photo-hint">
    Upload a clear colour photograph of yourself looking straight at the camera
  </div>
  <input id="person-profile-photo-field" class="govuk-file-upload" aria-describedby="person-profile-photo-hint" type="file" name="person[profile_photo]" />
</div>

Javascript-enhanced file upload with label and hint

Input

= f.govuk_file_field :profile_photo,
  label: { text: 'Identification photograph' },
  hint: { text: 'Upload a clear colour photograph of yourself looking straight at the camera' },
  javascript: true

<%= f.govuk_file_field :profile_photo, label: { text: 'Identification photograph' }, hint: { text: 'Upload a clear colour photograph of yourself looking straight at the camera' }, javascript: true %>

Output

Upload a clear colour photograph of yourself looking straight at the camera

<div class="govuk-form-group">
  <label for="person-profile-photo-field" class="govuk-label">
    Identification photograph
  </label>
  <div class="govuk-hint" id="person-profile-photo-hint">
    Upload a clear colour photograph of yourself looking straight at the camera
  </div>
  <div class="govuk-drop-zone" data-module="govuk-file-upload">
    <input id="person-profile-photo-field" class="govuk-file-upload" aria-describedby="person-profile-photo-hint" type="file" name="person[profile_photo]" />
  </div>
</div>

Javascript-enhanced file upload with custom text

The component’s text can be customised or localised by providing the following arguments:

• choose_files_button_text sets the text of the button that opens the file picker
• drop_instruction_text sets the text informing users they can drop files
• no_file_chosen_text sets the text displayed when no file has been chosen by the user
• multiple_files_chosen_text sets the text displayed when multiple files have been chosen by the user
• entered_drop_zone_text and left_drop_zone_text set the text announced by assistive technology then the user drags files into or out of the drop zone

Input

= f.govuk_file_field :profile_photo,
  label: { text: "Llwythwch ffeil i fyny" },
  javascript: true,
  choose_files_button_text: "Dewiswch ffeil",
  drop_instruction_text: "neu ollwng ffeil",
  no_file_chosen_text: "Dim ffeil wedi'i dewis",
  multipleFilesChosenText: { "other" => "%{count} ffeil wedi'u dewis", "one" => "%{count} ffeil wedi'i dewis"},
  entered_drop_zone_text: "Wedi mynd i mewn i'r parth gollwng",
  left_drop_zone_text: "Parth gollwng i'r chwith"

<%= f.govuk_file_field :profile_photo, label: { text: "Llwythwch ffeil i fyny" }, javascript: true, choose_files_button_text: "Dewiswch ffeil", drop_instruction_text: "neu ollwng ffeil", no_file_chosen_text: "Dim ffeil wedi'i dewis", multipleFilesChosenText: { "other" => "%{count} ffeil wedi'u dewis", "one" => "%{count} ffeil wedi'i dewis"}, entered_drop_zone_text: "Wedi mynd i mewn i'r parth gollwng", left_drop_zone_text: "Parth gollwng i'r chwith" %>

Output

<div class="govuk-form-group">
  <label for="person-profile-photo-field" class="govuk-label">
    Llwythwch ffeil i fyny
  </label>
  <div class="govuk-drop-zone" data-module="govuk-file-upload" data-i18n.choose-files-button="Dewiswch ffeil" data-i18n.drop-instruction="neu ollwng ffeil" data-i18n.no-file-chosen="Dim ffeil wedi'i dewis" data-i18n.entered-drop-zone="Wedi mynd i mewn i'r parth gollwng" data-i18n.left-drop-zone="Parth gollwng i'r chwith">
    <input id="person-profile-photo-field" class="govuk-file-upload" multipleFilesChosenText="other %{count} ffeil wedi'u dewis one %{count} ffeil wedi'i dewis" type="file" name="person[profile_photo]" />
  </div>
</div>