found a hackish fix by doing a manual ajax call and some other things with jquery

Gemfile

@@ -57,7 +57,7 @@ gem 'roo', '~> 2.7.1' # Spreadsheet parser
 gem 'wicked_pdf', '~> 1.1.0'
 gem 'silencer' # Silence certain Rails logs
 gem 'wkhtmltopdf-heroku'
-gem 'remotipart', '~> 1.2' # Async file uploads
+# gem 'remotipart', '~> 1.2' # Async file uploads
 gem 'faker' # Generate fake data
 gem 'auto_strip_attributes', '~> 2.1' # Removes unnecessary whitespaces from ActiveRecord or ActiveModel attributes
 gem 'deface', '~> 1.0'

app/assets/javascripts/application.js.erb

@@ -3,7 +3,7 @@
 //= require jquery
 //= require jquery.turbolinks
 //= require jquery_ujs
-//= require jquery.remotipart
+
 //= require jquery.mousewheel.min
 //= require jquery.scrollTo
 //= require jquery.autosize

app/controllers/protocols_controller.rb

@@ -645,7 +645,6 @@ class ProtocolsController < ApplicationController
         @json_object['steps']
       )
     end
-
     @protocol = Protocol.new
     respond_to do |format|
       format.js {} # go to the js.erb file named the same as this controller,

app/views/protocols/import_export/_import_json_protocol_modal.html.erb

@@ -12,22 +12,43 @@
         <h4 class="modal-title"><%= t('protocols.index.modal_import_json_title') %></h4>
         <%= t("protocols.index.modal_import_json_notice") %>
       </div>
-      <%= form_tag({ action: "protocolsio_import_create"}, id:"protocols_io_form",
+      <%= form_with url: url_for(controller: 'protocols', action: 'protocolsio_import_create'), remote:true, id:"protocols_io_form",
-      format: :json, multipart: true,remote: true,:method => "post") do %>
+      authenticity_token:true,method:"post",multipart:true do |form| %>
 
       <div class="modal-body">
 
-        <%= file_field_tag 'json_file', accept: '.txt,.json' %>
+        <%= 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-primary" %>
+        btn-primary", id: "pio_submit_btn_id" %>
       </div>
-      <% end %>
+
 
     </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>

app/views/protocols/protocolsio_import_create.js.erb

@@ -13,21 +13,15 @@ $('#pio_no_file_error_span').addClass('has-error').html('<span class="help-block
 <% @protocolsio_no_file = false %>
 <% else %>
   $('#modal-import-json-protocol').modal('hide');
-      <% if remotipart_submitted? %> <%# a workaround to a bug with remotipart, that caused alot of headache, courtesy of github.com/dhampik %>
-        $('#protocolsio-preview-modal-target').html(
-          "<%= j "#{render(:partial => 'protocols/import_export/import_json_protocol_preview_modal')}" %>"
-        );
-      <% else %>
   $('#protocolsio-preview-modal-target').html(
     "<%= j render(:partial => 'protocols/import_export/import_json_protocol_preview_modal') %>"
   );
-      <% end %>
   $('#modal-import-json-protocol-preview').modal('show');
   $('.modal').on('hidden.bs.modal', function (e) {
     if($('.modal').hasClass('in')) {
       $('body').addClass('modal-open');
     }
   });
-
-
 <% end %>
+$("#protocols_io_form")[0].reset();
+$('#protocols_io_form').trigger("reset");