Rails 4: How can I use "redirect_to" with AJAX to render a partial after uploading file(s)?

565 Views Asked by At

I am using carrierwave and remotipart to handle an AJAX form where I upload an album of music and accompanying information to a website. After submitting the form, I would like to redirect the partial where the form was located to the newly created album's page. The form, located in \albums\_new.html.erb looks like this:

<h1>Add a new album</h1>
<div>
    <%= form_for(album, remote: true, url: {action: "create"}, html: {multipart: true}) do |f|%>
        <h2>Information: </h2>
        <div>
            <%= f.label :title %>
            <%= f.text_field :title %>
            <%= f.label :year %>
            <%= f.text_field :year %>
            <%= f.label :image %>
            <%= f.file_field :image %>
        </div>

        ...

        <%= f.submit "Add Album" %>
    <% end %>
</div>

The controller's new and create methods look like this:

def new
  @album = Album.new
  @album.producers.build
  @album.tracks.build
end

def create
  respond_to do |format|
    @album = Album.new(album_params)
    if @album.save
      format.js {redirect_to album_path(@album)}
    end
  end
end

The redirect currently only works when I submit the form without any file attachments. If I do try to include a file attachment, the upload still succeeds but the redirect fails and I get the following message in my console:

ActionView::MissingTemplate (Missing template albums/show,
application/show with {:locale=>[:en], :formats=>[:html], :variants=>[],
:handlers=>[:erb, :builder, :raw, :ruby, :coffee, :jbuilder]}.

I have been able to implement a workaround where I simply call the same expression in create.js.erb that I do in show.js.erb:

$('#listen-window').html("<%= j (render partial: 'show', locals: {album: @album, tracks: @tracks, producers: @producers}) %>")

and write a create method as such:

def create
  respond_to do |format|
    @album = Album.new(album_params)
    if @album.save
      @tracks = @album.tracks
      @producers = @album.producers
      format.js
    end
  end
end

Functionally, this code does achieve what I want. However, it does not make sense to me from a routing perspective. How would you write a more elegant solution?

0

There are 0 best solutions below