Invalid Authenticity Token when using in remote form

[amfazlani]

Hi, thank you for this great gem. I was having an issue when submitting a remote rails form along with drag_and_drop_file_field

1. Steps to reproduce Create rails form with remote set to true, add <%=f.drag_and_drop_file_field :documents, 'Drag and drop images here!'%> as form field. Submit form.
2. Expected behaviour Submitting form not receiving CSRF error and processing request as js
3. Actual behaviour Submitting form returns 'Can't verify CSRF token authenticity.' error and processing request as html
4. System configuration Rails version: 'Rails 5.2.3' Ruby version: 'ruby 2.6.3p62'

[daveokeeffe]

When JS is used to make Ajax calls to a rails server, the requests must include the CSRF token in every request. It gets this information from csrf-param and csrf-token meta tags in the page header. Do these tags appear in your rendered view? They're usually set in the page html.erb layout by the following code: = csrf_meta_tags

[amfazlani]

Hi, thank you for your response. Yeah i have <%= csrf_meta_tags %> in my application.html.erb and all other remote forms are working. It just breaks when I add active_storage_drag_and_drop file field and try to send the form when it is set to remote: true. I am thinking I might need the remotipart gem to be able to send files with ajax to the backend.

[daveokeeffe]

asdnd definitely doesn't need remotipart as remotipart is a jquery plugin, and asdnd is doing it's best to do everything in standard js.

Can you let us know how you're painting the form tag? What form painting helper method are you using? Also try making a regular form, without the asdnd form field, and making it remote: true, to check does that work. I'm guessing it doesn't, and there's a problem with how you're making your form tags.

[amfazlani]

got you. I am using simple form could that be the issue. I have remote: true working in other places in my app and I tried sending the modal I am using asdnd without asdnd and it worked but when i add the file field with asdnd it shows the invalid error. Here is the erb markup

<%= simple_form_for(project, html: { autocomplete: 'off', class: 'project-form', remote: true}) do |f| %>
  <div class="row">
    <div class="col s12 m6">
      <%= f.input :name %>
    </div>
    <div class="col s12 m6">
      <%= f.input :project_type%>
    </div>
    <div class="col s12 m12">
      <%= f.input :description, as: :text, input_html: {class: 'materialize-textarea'} %>
    </div>
    <div class="col s12 m12">
      <%=f.drag_and_drop_file_field :attachments do %>
        <div>
          <i class="cloud-icon material-icons">cloud_upload</i>
          <h6>Drop files here or click to upload.</h6>
        </div>
      <%end%>
    </div>
  </div>
  <div class="row mg-0">
    <div class="col s12 m6 offset-m3">
        <%= f.submit "Submit", class: 'form-button full-width' %>
    </div>
  </div>
<%end%>

[daveokeeffe]

There's a chance your issue is related to this File Input issue logged against Simple Forms: https://github.com/plataformatec/simple_form/issues/1658

Can you take a look and see if that looks related? As a possible work-around, you could try switching to using form_for, but with simple_fields_for wrappers around your inputs.

I also notice that the remote: true param is being included in the html: {} block of parameters - are you sure that's correct? Can you verify on client side and server side that the form is being submitted with an Ajax request?

Sorry, I've never used Simple Forms before, so I can only make guesses at this point!

[amfazlani]

Got it thats probably what it is. Thanks for looking into it man. I ended up making it a regular form instead of remote and it works great. As far as formatting, Ive used that format in other forms and they work ok and the html that is rendered has data-remote true so it must be correct. I will go ahead and close this issue. Thank you.