29 lines
883 B
HTML
29 lines
883 B
HTML
{% load crispy_forms_field %}
|
|
|
|
<div class="field">
|
|
<div id="div_id_{{ field.name }}" class="file has-name is-fullwidth">
|
|
<label class="file-label">
|
|
{% crispy_field field 'class' 'file-input'%}
|
|
<span class="file-cta">
|
|
<span class="file-icon">
|
|
<span class="material-symbols-outlined">file_upload</span>
|
|
</span>
|
|
<span class="file-label">
|
|
Choose a file…
|
|
</span>
|
|
</span>
|
|
<span class="file-name"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const fileInput = document.querySelector('#div_id_{{ field.name }} input[type=file]');
|
|
fileInput.onchange = () => {
|
|
if (fileInput.files.length > 0) {
|
|
const fileName = document.querySelector('#div_id_{{ field.name }} .file-name');
|
|
fileName.textContent = fileInput.files[0].name;
|
|
}
|
|
}
|
|
</script>
|