<div class="file-input js-widget" data-init-with="fileInput">
  <span class="js-fileapi-wrapper upload-btn">
    <span class="btn btn-default btn-file">
      {{ button_label }}
      {{ input|safe }}
    </span>
  </span>

  <div class="selected-files">
    {%- for data in existing %}
      <div class="file-item file-item-existing">
        <span class="file-info">{{ data.filename |default('') or loop.index0 }} — {{ data.size | filesize }}</span>
        {%- if field.allow_delete %}
          <button type="button" class="btn"
              data-name="__{{ field.name }}_delete__"
              data-value="{{ loop.index0 }}"
              data-deleted="{{ data.delete |tojson }}">
            <span class="fa fa-trash"></span>
          </button>
        {%- endif %}
      </div>
    {%- endfor %}

    {%- for data in uploaded %}
      <div class="file-item file-item-uploaded">
        <span class="file-info">{{ data.filename }} – {{ data.size|filesize }}</span>
        <input type="hidden" name="{{ field.name }}" value="{{ data.handle }}"/>
        <a class="close" href="#">&times;</a>
      </div>
    {%- endfor %}
  </div>
</div>
