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

Slim
ERB

= 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

Rendered
HTML

Identification photograph

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>