mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-09 15:29:50 -04:00
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:
24
app/templates/components/file-upload.html
Normal file
24
app/templates/components/file-upload.html
Normal 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 %}
|
||||
Reference in New Issue
Block a user