ActionController::UnknownFormat in RegistrationsController#create (Devise)

Question

I am trying to do Devise registration via modal window (remote: true) and do all in backend and by rendering javascript when some validation errors occur. So far I am in the middle of the road and my validation messages appear to be working just fine, but until the time I try to upload also an image, then I get unknown format error page. I tried few things already, but as I am quite new with RoR, my ideas came to the end. Below is my registration_controller, modal view and screen shots.

I have not come to the successful registration of the object yet, so the code may contain some issues in this point, but right now the described issue is blocking me to move forward.

I will really appreciate any help on this. Thank you, Miroslav.

---

RegistrationsController.rb

class RegistrationsController < Devise::RegistrationsController  
clear_respond_to
respond_to :js

def create
    build_resource(resource_params)
    child_class = params[:user][:user_type].camelize.constantize

    resource.rolable = child_class.new(user_params(child_class.to_s.underscore.to_sym))

    valid = resource.valid?
    valid = resource.rolable.valid? && valid

    if valid && resource.save
      if resource.active_for_authentication?
        set_flash_message :notice, :signed_up if is_navigational_format?
        flash.keep(:notice) 
        sign_in(resource_name, resource)
        render :js => "window.location = #{root_path.to_json}"     
      else
        set_flash_message :notice, :inactive_signed_up, :reason => inactive_reason(resource) if is_navigational_format?
        expire_session_data_after_sign_in!
        respond_with resource, location: after_inactive_sign_up_path_for(resource)
      end
    else
      clean_up_passwords resource
      respond_to do |format|
        format.js {render layout: false, content_type: 'text/javascript'}
      end
    end
end

private
  def user_params(user)
    if user.to_s == "non_profit"
       params[:user][:non_profit].permit(:name, :ico, :non_profit_type_id, :description, :website, :representative, contact_attributes: [:first_name, :last_name, :email, :phone, image_attributes: [:image]], image: [:image])
    else
       params[:user][:customer].permit(:first_name, :last_name, :gender, :dob, :city)
    end
  end

  def resource_params
    params[:user].permit(:email, :password, :password_confirmation, :terms, :opt_in_correspondence, bank_account_attributes: [:number, :bank_code_id], address_attributes: [:street, :city, :postcode])
  end

end

Modal View

<% 
@address = resource.build_address
resource.rolable = "NonProfit".constantize.new if resource.rolable.nil? 
@logo = resource.rolable.build_image
@contact = resource.rolable.build_contact
@picture = resource.rolable.contact.build_image
@account = resource.build_bank_account
%>

<div id="modal-nonprofit-registration" class="z-2000 modal-bg" style="display: block;">
<div class="modal-wrap" style="margin-top: 0px;">
    <div class="modal">
        <div class="modal-header full bg-main txt-white container-center semi-padding-bottom semi-padding-top relative">
            <h3 class="no-margin size-large-r"><%= t(:register_nonprofit_title) %></h3>
            <div class="absolute full-h wrap-cross semi-right top">
                <div class="table full-h">
                    <div class="full-h full-w table-center">
                        <span id="registration-close" class="bg-cross table-center pointer"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal body  /-->
        <div class="modal-body table-nr full-w modal-content bg-base col-wrap half-padding-top half-padding-bottom half-padding-left half-padding-right">

            <%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), html: { data: {type: 'script'}, id: "register-nonprofit-form" }, remote: true, multipart: true, authenticity_token: true) do |f| %>

                <%= f.input :user_type, :as => :hidden, :input_html => { :value => "NonProfit" } %>
                <div class="row">    
                    <div class="col-6">
                        <h3><%= t(:register_nonprofit_login_details_title) %></h3>
                        <div class="row">
                            <div class="col-12 img">
                                <%= f.input :email, as: :email, autofocus: true, :required => true, label: false, placeholder: t(:register_field_email) %>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12 img">
                                <%= f.input :password, as: :password, autocomplete: "off",  :required => true, label: false, placeholder: t(:register_field_password) %>
                                <span class="muted-hint"><%= t(:register_field_password_hint) %></span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <%= f.input :password_confirmation, as: :password, autocomplete: "off", :required => true, label: false, placeholder: t(:register_field_password_confirmation) %>
                            </div>
                        </div>
                    </div>

                    <%= f.simple_fields_for :non_profit, resource.rolable do |np| %>  
                        <%= np.simple_fields_for :contact, resource.rolable.build_contact do |c| %>

                            <div class="col-6 last">
                                <h3><%= t(:register_nonprofit_contact_details_title) %></h3>
                                <div class="row">
                                    <div class="col-6">
                                        <%= c.input :first_name, :required => true, label: false, placeholder: t(:register_field_firstname) %>
                                    </div>

                                    <div class="col-6">
                                        <%= c.input :last_name, :required => true, label: false, placeholder: t(:register_field_lastname) %>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        <%= c.input :email, as: :email, :required => true, label: false, placeholder: t(:register_field_email) %>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        <%= c.input :phone, as: :tel, :required => true, label: false, placeholder: t(:register_field_phone) %>
                                    </div>
                                </div>                                                 

                                <%= c.simple_fields_for :image, @picture do |i| %>              
                                    <div class="row">
                                        <div class="col-12">
                                            <%= i.input :image, as: :file, label: false, placeholder: t(:register_field_photo), :class => "file", input_html: { :id => 'contact-file-input', hidden: true } %>
                                            <div class="custom_file_upload">
                                                <input id="contact-file-text" type="text" class="file" placeholder="<%= t(:register_field_photo) %>" name="file_info">
                                                <div class="file_upload" id="contact-file-upload">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <% end %> <!-- end of contact image field -->
                            </div>
                        <% end %> <!-- end of contact fields -->
                    <% end %> <!-- end of non profit fields -->
                </div>

                <div class="row">   
                    <h3><%= t(:register_nonprofit_organization_details_title) %></h3>    

                    <div class="col-6">
                        <%= f.simple_fields_for :non_profit, resource.rolable do |np| %>  
                            <h4><%= t(:register_nonprofit_organization_details_basic_title) %></h4>
                            <div class="row">
                                <div class="col-12">
                                    <%= np.input :name, :required => true, label: false, placeholder: t(:register_field_org_name) %>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <%= np.input :ico, :required => true, label: false, placeholder: t(:register_field_ico) %>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <%= np.select(:non_profit_category_id, options_for_select(NonProfitCategory.options_for_select), { :prompt  => t(:register_nonprofit_types_prompt) }, { :class => "form-control" }) %>
                                </div>
                            </div>

                        <% end %> <!-- end of nonprofit fields -->

                        <%= f.simple_fields_for :bank_account, @account do |ba| %> 
                        <div class="row">
                            <div class="col-8">
                                <%= ba.input :number, :required => true, label: false, placeholder: t(:register_field_account) %>
                                <span class="muted-hint"><%= t(:register_field_account_hint) %></span>
                            </div>

                            <div class="col-4">
                                <%= ba.select(:bank_code_id, options_for_select(BankCode.options_for_select), { :prompt  => t(:register_nonprofit_codes_prompt) }, { :class => "form-control" }) %>
                            </div>                                   
                        </div>
                        <% end %> <!-- end of bank account fields -->

                        <%= f.simple_fields_for :address, @address do |a| %>                 
                        <h4><%= t(:register_nonprofit_organization_details_address_title) %></h4>
                        <div class="row">
                            <div class="col-12">
                                <%= a.input :street, :required => true, label: false, placeholder: t(:register_field_street) %>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-8">
                                <%= a.input :city, :required => true, label: false, placeholder: t(:register_field_city) %>
                            </div>

                            <div class="col-4">
                                <%= a.input :postcode, :required => true, label: false, placeholder: t(:register_field_psc) %>
                            </div>
                        </div>
                        <% end %> <!-- end of address fields -->
                    </div>

                    <div class="col-6 last">
                        <h4><%= t(:register_nonprofit_organization_details_other_title) %></h4>
                        <!--<div class="muted-italic">Doporučujeme vyplnit</div>-->

                        <%= f.simple_fields_for :image, @logo do |i| %>                  
                            <div class="row">
                                <div class="col-12">
                                    <%= i.input :image, as: :file, label: false, placeholder: t(:register_field_logo), :class => "file", input_html: { :id => 'nonprofit-file-input', hidden: true } %>
                                    <div class="custom_file_upload">
                                        <input id="nonprofit-file-text" type="text" class="file" placeholder="<%= t(:register_field_logo) %>" name="file_info">
                                        <div class="file_upload" id="nonprofit-file-upload">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <% end %> <!-- end of nonprofit image field -->

                        <%= f.simple_fields_for :non_profit, resource.rolable do |np| %>        
                            <div class="row">
                                <div class="col-12">
                                    <%= np.input :website, as: :url, label: false, placeholder: t(:register_field_web) %>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <%= np.input :description, as: :text, :required => true, label: false, placeholder: t(:register_field_description), :input_html => { :rows => 15 } %>
                                    <div class="remainChars"><span class="usedChars">0</span>/1000</div>     
                                </div>
                            </div>
                        <% end %> <!-- end of nonprofit fields -->

                    </div>
                </div>


                <div class="row">    
                    <div class="col-7">
                        <%= f.simple_fields_for :non_profit, resource.rolable do |np| %> 
                            <div class="checkbox">
                                <%= np.input :representative, as: :boolean, :required => true, boolean_style: :inline, :input_html => { :checked => false }, label: t(:register_field_representative) %>
                            </div>
                        <% end %>

                        <div class="checkbox">
                            <%= f.input :terms, as: :boolean, :required => true, boolean_style: :inline, :input_html => { :checked => false }, label: ("#{t(:register_field_terms)} #{link_to t(:register_form_link_terms), legal_statements_path, :title => t(:register_form_link_terms), :class => 'underline capital'}").html_safe %>
                        </div>

                        <div class="checkbox">
                            <%= f.input :opt_in_correspondence, as: :boolean, boolean_style: :inline, :input_html => { :checked => true }, label: t(:register_field_subscribe) %>
                        </div>
                    </div>

                    <div class="col-5 last">
                        <input type="submit" class="submit last" value="Registrovat" name="">
                    </div>
                </div>    
            <% end %>
        </div>
    <!-- end of modal body /-->
    </div>
</div>

SCREENSHOTS

Render create.js.erb and show error messages properly, when I do not upload any image

Get error page when I try to upload also an image with paperclip

Answer 1

File uploads doesn't work with remote forms. You should use some other way to upload files.

For example;

• https://github.com/JangoSteve/remotipart
• https://github.com/tors/jquery-fileupload-rails

My suggestion is using remotipart.

Answer 2

As seen in http://www.mehmet.pw/category/ruby-on-rails/

Just change registration_path(resource_name), taking out the resource_name so it doesn't look for resource.model, just for resource...

IT worked for me with this code (fixing the same error):

    <h2>Sign up</h2>
<%= devise_error_messages! %>
<div class="container">
  <%= form_for(resource, as: resource_name, url: user_registration_path, format: :json) do |f| %>
    <form class="form-horizontal">

      <div class="form-group">
        <%= f.label :first_name %>
        <%= f.text_field :first_name, class: 'form-control' %>
      </div>

      <div class="form-group">
        <%= f.label :last_name %>
        <%= f.text_field :last_name, class: 'form-control' %>
      </div>

      <div class="form-group">
        <%= f.label :phone %>
        <%= f.telephone_field :phone, class: 'form-control' %>
      </div>

      <div class="form-group">
        <%= f.label :email %>
        <%= f.email_field :email, class: 'form-control' %>
      </div>


      <div class="form-group">
        <% if @minimum_password_length %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
        <% end %>
        <%= f.label :password %>
        <%= f.password_field :password, class: 'form-control' %>
      </div>

      <div class="form-group">
        <%= f.label :password_confirmation %>
        <%= f.password_field :password_confirmation, class: 'form-control' %>
      </div>


      <div class="actions">
        <%= f.submit "Create", class:"btn btn-primary btn-lg"%>
      </div>

    </form>
<% end %>
<div class="container-fluid">
  <%= render "devise/shared/links" %>
</div>

</div>