Rails 5: Remote form failing

Question

I have a form for create products in my rails app:

= form_for product, url: url, method: :post, html: { class: 'product-form' }, remote: true do |f|

  .row
    .col-xs-12.col-sm-6
      .form-group.required
        = f.label :name
        = f.text_field :name, autofocus: true, class: 'form-control'
    .col-xs-12.col-sm-6
      .form-group.required
        = f.label :price
        .input-group
          .input-group-addon $
          = f.number_field :price, class: 'form-control'

  .row
    .col-xs-12
      .form-group
        = f.label :description
        = f.text_area :description, class: 'form-control'

  .row
    .col-xs-12
      .form-group
        = label_tag :images, 'Images'
        = f.file_field :images, multiple: true, class: 'form-control'

  .row
    .col-xs-12.text-right
      = f.submit "Cancel", class: 'btn btn-default', data: { dismiss: "modal" }
      = f.submit "Save",  class: 'btn btn-primary'

It works fine on my development environment. But when running on heroku (production), it fails when clicking on "Save" (note that I am using Devise and the login/signup works fine), with this error:

2016-10-14T11:55:02.825234+00:00 app[web.1]: W, [2016-10-14T11:55:02.825168 #3] WARN -- Can't verify CSRF token authenticity.

2016-10-14T11:55:02.825602+00:00 app[web.1]: I, [2016-10-14T11:55:02.825555 #3] INFO -- : Completed 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0ms)

2016-10-14T11:55:02.826511+00:00 app[web.1]: F, [2016-10-14T11:55:02.826471 #3] FATAL -- : ActionController::InvalidAuthenticityToken (ActionController::InvalidAuthenticityToken):

The thing is when I don't select an image, it works fine. So I think the problem might be with the image uploader:

models/product.rb

class Product
  mount_uploaders :images, ProductImageUploader
  # more stuff...
end

uploaders/product_image_uploader.rb

class ProductImageUploader < CarrierWave::Uploader::Base
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end

initializers/carrier_wave.rb

if Rails.env.development? || Rails.env.test?
  CarrierWave.configure do |config|
    config.storage = :file
    config.enable_processing = false if Rails.env.test?
  end
else
  CarrierWave.configure do |config|
    config.fog_provider = 'fog/aws'                        # required
    config.fog_credentials = {
      provider:              'AWS',
      aws_access_key_id:     ENV["AWS_KEY_ID"],
      aws_secret_access_key: ENV["AWS_KEY_SECRET"],
      region:                'us-west-2',                  # optional, defaults to 'us-east-1'
    }

    config.fog_directory = ENV['AWS_BUCKET']
    config.fog_public = true

    config.cache_dir = "#{Rails.root}/tmp/uploads"
  end
end

Another thing is that I tried to to a simple storage: :file in production, avoiding the S3 upload stuff, and it fails too.

Any idea?

UPDATE!

I added the authenticity_token: true in the form and it doesn't raise the exception I mentioned above. However, something weird is happening:

When I don't select an image from the form, the POST is done remote:

Processing by ProductsController#create as JS

When I select an image in the form, the POST is not done remote:

Processing by ProductsController#create as HTML

UPDATE 2!

This is the generated html for the form tag:

<form class="product-form" id="new_product" enctype="multipart/form-data" action="/seller/products" accept-charset="UTF-8" data-remote="true" method="post">
  <input name="utf8" type="hidden" value="✓">
  <input type="hidden" name="authenticity_token" value="SOME STUFF">     </form>

Sajan Sajan · Accepted Answer · 2016-10-14T12:17:18

In form declaration, after remote: true add this authenticity_token: true like:

form_for product, url: url, method: :post, html: { class: 'product-form' }, remote: true, authenticity_token: true do |f|

Rails 5: Remote form failing

1 Answers