notifications-admin/app/templates/components/file-upload.html

{% from "components/components/button/macro.njk" import usaButton %}

{% macro file_upload(
  field,
  allowed_file_extensions,
  action=None,
  button_text="Choose file",
  alternate_link=None,
  alternate_link_text=None,
  hint=None,
  show_errors=True

) %}
  <form method="post" enctype="multipart/form-data" {% if action %}action="{{ action }}"{% endif %} class="{% if field.errors and show_errors %}form-group-error{% endif %}" data-module="file-upload">
    <label class="file-upload-label" for="{{ field.name }}">
      <span class="usa-sr-only">{{ field.label.text }}</span>
      {% if hint %}
        <span class="form-hint">
          {{ hint }}
        </span>
      {% endif %}
      {% if field.errors and show_errors %}
        <span class="error-message">
          {{ field.errors[0] }}
        </span>
      {% endif %}
    </label>
    {{ field(**{
      'class': 'file-upload-field',
      'accept': allowed_file_extensions|format_list_items('.{item}')|join(',')|e
    }) }}
    <label class="file-upload-button" for="{{ field.name }}">
      {{ button_text }}
    </label>
    {% if alternate_link and alternate_link_text %}
      <span class="file-upload-alternate-link">
        or <a class="usa-link" href="{{ alternate_link }}">{{ alternate_link_text }}</a>
      </span>
    {% endif %}
    <label class="file-upload-filename" for="{{ field.name }}"></label>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
    {{ usaButton({ "text": "Submit", "classes": "file-upload-submit" }) }}
  </form>
{% endmacro %}