Files
notifications-admin/app/templates/components/file-upload.html
Chris Hill-Scott 3f41090a94 Fix duplicate labels on form inputs
It’s invalid HTML to have multiple labels nested within each other. This
was happening by accident because WTForms tries to be clever – when you
put `{{ field.label }}` in a template it prints a `<label>` tag for you,
not just the text of the label. But we put our own `<label>` tags in the
HTML to have more control of them.

This commit stops WTForms being so clever.
2017-02-14 11:55:46 +00:00

32 lines
1.2 KiB
HTML

{% macro file_upload(field, button_text="Choose file", alternate_link=None, alternate_link_text=None) %}
<form method="post" enctype="multipart/form-data" class="{% if field.errors %}error{% endif %}" data-module="file-upload">
<label class="file-upload-label" for="{{ field.name }}">
<span class="visually-hidden">{{ field.label.text }}</span>
{% if hint %}
<span class="form-hint">
{{ hint }}
</span>
{% endif %}
{% if field.errors %}
<span class="error-message">
{{ field.errors[0] }}
</span>
{% endif %}
</label>
{{ field(**{
'class': 'file-upload-field'
}) }}
<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 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() }}" />
<input type="submit" class="file-upload-submit" value="Submit" />
</form>
{% endmacro %}