Remotipart ( + Carrierwave) not uploading files nor using ajax

Question

I've spent a week right now trying to get this to work, reading as much as I can about remotipart, and trying to set it right, but I have failed miserably. I have form which has a title, description, an audio file and an image file. If I submit the form without remote: true it works perfectly, but once I try to upload the form with ajax, it seems like the files are not being uploaded.

Since I made the audio file a requirement for posting, I get redirected to the new action, displaying the error indicating that 'audio' must not be blank.

Even if I remove this validation from the model, once I try to upload, there is no audio file being uploaded.

Also, by checking the developer tools, I've realized that the response I'm getting is not javascript, but html.

I've already tried other gems, like jquery-uploadfile-rails, but none of them work for me for different reasons. I have no idea what to do right now.

_form.html.erb

<%= form_for(post, html: {multipart: true, remote: true}, authenticity_token: true) do |f| %>

<div id="form-content">
    <div class="input-group field">
        <span class="input-group-addon"><%= f.label 'Title' %></span>
        <%= f.text_field :title, class: "form-control", placeholder: "Title" %>
    </div>

    <div class="input-group field">
        <span class="input-group-addon"><%= f.label :descrption %></span>
        <%= f.text_field :description, class: "form-control", placeholder: "Brief Description" %>
    </div>

    <div class="input-group field">
        <span class="input-group-addon"><%= f.label :audio %></span>
        <%= f.file_field :audio, class: "filestyle", 'data-iconName' => "glyphicon glyphicon-music", 'data-buttonText' => "Browse" %>
    </div>

    <div class="input-group field">
        <span class="input-group-addon"><%= f.label :art %></span>
        <%= f.file_field :art, class: "filestyle", 'data-iconName' => "glyphicon glyphicon-picture", 'data-buttonText' => "Browse" %>
    </div>


    <%= button_tag(type: 'submit', class: "btn btn-block btn-primary", id: "btn-post") do %>
        <span class="icon-ok icon-white"></span> Post now!
    <% end %>

</div>
<% end %>

posts_controller.rb

def create
    @post = Post.new(post_params)
    @post.user_id = current_user.id
    respond_to do |format|
        if @post.save
            format.html { redirect_to action: 'index' }
            format.js
            format.json { render :show, status: :created, location: @post }
        else
            format.html { render :new }
            format.js
            format.json { render json: @post.errors, status: :unprocessable_entity }
        end
    end
end

create.js.erb

// Display a Javascript alert
alert('success!');
<% if remotipart_submitted? %>
    alert('submitted via remotipart')
<% else %>
    alert('submitted via native jquery-ujs')
<% end %>

Lastly, I'm still learning about rails, it's arquitechture, and the 'rails way'. Even though I've been trying to do everything correctly, I'm pretty sure I have been improvising some parts, trying to solve errors. If you find anything weird and feel like sharing, I'll be completely open to learn the good way. If you need to check any other part of my code just tell me. Thanks!

Answer 1

When using remotipart you have to specify the action in your form_for, for example - this should be

<%= form_for(post, remote: true, format: "js", html: {multipart: true}, authenticity_token: true) do |f| %>

Let me know if this works for you! Also, I'm not sure if the authenticity_token will work here. You may have to go into your controller to disable this with a before_action.