Add custom file upload component

The default browser file upload control is difficult to style, but looks totally
out of place.

This commit replaces it with one that has a GOV.UK style button, as a first
step.

Based heavily on this example:
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
This commit is contained in:
Chris Hill-Scott
2016-02-02 17:28:30 +00:00
parent 44045b2d09
commit 4447af3fec
9 changed files with 103 additions and 2 deletions

View File

@@ -0,0 +1,24 @@
{% macro file_upload(field) %}
<div class="form-group{% if field.errors %} error{% endif %}" data-module="file-upload">
<label class="file-upload-label" for="{{ field.name }}">
{{ field.label }}
{% 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 }}">
Choose file
</label>
<label class="file-upload-filename" for="{{ field.name }}"></label>
</div>
{% endmacro %}