<div id="addAttachmentModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Attachment(s)</h4>
      </div>
      <div class="modal-body">
          <form method="post" id="add-attachment-form" enctype="multipart/form-data">{% csrf_token %}
              <input type="file" multiple name="attachments"/>
              <input type="hidden" name="next" value="{% url 'note_info' note.id %}"/>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="add-attachment-save">Save</button>
      </div>
    </div>
  </div>
</div>
<script>
    $(document).ready(() => {
        const $modal = $('#addAttachmentModal');
        const addAttachmentSave = document.querySelector('#add-attachment-save');
        const addAttachmentForm = document.querySelector('#add-attachment-form');
        document.querySelectorAll('.add-attachment[data-model][data-ref]').forEach((elem) => {
            elem.addEventListener('click', () => {
                addAttachmentModal(elem.dataset.model, elem.dataset.ref);
            });
        });
        $modal.on('hidden.bs.modal', () => {
            addAttachmentForm.reset();
        });
        addAttachmentSave.addEventListener('click', () => {
            addAttachmentForm.submit();
        });

        function addAttachmentModal(model, ref) {
            addAttachmentForm.action = '{% url 'attachment_add' 'X' 0 %}'
                .replace('X', model)
                .replace('0', ref);
            $modal.modal('show');
        }
    });
</script>