Uploading normal jpeg images and pngs through AJAX in Rails does not throw any errors. However, when attempting to upload a gif (which is whitelisted), the user gets redirected back to the home page. The issue seems to be with the absence of a csrf_token during the form submission. Is there a way to include a csrf_token in the form when using create.js.erb?
Server Development Log
Started POST "/posts" for 127.0.0.1 at 2019-02-24 19:39:51 -0500
Processing by PostsController#create as HTML
Parameters: {"utf8"=>"✓", "post"=>{"body_text"=>"Testing the gif again!", "photo_cache"=>""}, "commit"=>"Post"}
User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 51], ["LIMIT", 1]]
Can't verify CSRF token authenticity.
(1.0ms) BEGIN
(0.0ms) COMMIT
Completed 401 Unauthorized in 110ms (ActiveRecord: 2.0ms)
Started GET "/login" for 127.0.0.1 at 2019-02-24 19:39:53 -0500
Processing by Devise::SessionsController#new as HTML
User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 51], ["LIMIT", 1]]
Redirected to https://127.0.0.1/
Filter chain halted as :require_no_authentication rendered or redirected
Completed 302 Found in 5ms (ActiveRecord: 1.0ms)
Started GET "/" for 127.0.0.1 at 2019-02-24 19:39:55 -0500
Processing by HomeController#index as HTML
posts_form.html.erb
<%= simple_form_for(@post, multipart: true, remote: true) do |f| %>
<div class="row">
<div class="col">
<div class="post-textarea">
<%= f.input :body_text, as: :text, class: 'form-control post-placeholder', label: false, placeholder: 'Add a post to share with others', style: "overflow: hidden; resize: none;" %>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5">
<%= f.button :submit, 'Post', class: 'form-control submit-button bttn-gradient bttn-md bttn-royal', :data => {:disable_with => 'Wait...a min'} %>
</div>
<div class="col-md-5">
<label class="bttn-minimal bttn-md bttn-royal">
Add Photo
<span style="display:none;">
<%= f.input :photo, as: :file, label: false, input_html: {accept: 'image/*'} %>
</span>
</label>
<% if f.object.photo? %>
<%= image_tag f.object.photo.url(:feed_preview), class: 'img-responsive img-thumbnail' %>
<% end %>
<%= f.hidden_field :photo_cache %>
<div class="post-preview-container">
<img id="img_prev" width="100" height="100" src="#" alt="preview" class="img-thumbnail d-none"/> <br/>
<a href="#" id="cancel_img_btn" class="d-none" onclick="return !(document.getElementById('photo').innerHTML=document.getElementById('photo').innerHTML);">Cancel
Upload</a>
</div>
</div>
</div>
<% end %>
create.js.erb
$("#container_posts").prepend("<%= j render partial: "posts/#{@post.post_type}", locals: {post: @post } %>");
$("#post_<%= @post.id %>").hide().fadeIn(1000);
$("#no-posts").hide().fadeOut();
$("#body_text").val("");
$("#img_prev").hide().fadeOut();
$("#cancel_img_btn").hide().fadeOut();