<div
  class="modal fade"
  id="modal-import-json-protocol"
  tabindex="-1"
  role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title"><%= t('protocols.index.modal_import_json_title') %></h4>
        <%= t("protocols.index.modal_import_json_notice") %>
      </div>
      <%= form_with url: url_for(controller: 'protocols', action: 'protocolsio_import_create'), remote:true, id:"protocols_io_form",
      authenticity_token:true,method:"post",multipart:true do |form| %>

      <div class="modal-body">

        <%= form.file_field 'json_file', accept: '.txt,.json', id: "json_file_id" %>
        <div id="pio_no_file_error_span"></div>

      </div>
      <% end %>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><%= t('general.cancel')%></button>
        <%= submit_tag t('protocols.index.modal_import_json_upload'), class: "btn btn-success", id: "pio_submit_btn_id" %>
      </div>


    </div>
  </div>
</div>
<script>

$('#pio_submit_btn_id').on('click', function(e) {
  e.preventDefault();
  $('#protocols_io_form').submit();
})
$('#protocols_io_form').on('submit', function(e) {
  e.preventDefault();
  var form = document.querySelector('#protocols_io_form') // Find the <form> element
  var formData = new FormData(form); // Wrap form contents
  $.ajax({
  url: 'protocols/protocolsio_import_create',
  type: 'POST',
  data: formData,
  contentType: false,
  processData: false
});
})

</script>
