{% 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">
            <i class="fas fa-upload"></i>
            </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>