CODEWITHSUNDEEP
ruby-on-railsajaxfile-uploadcarrierwaveremotipart
Sean Magyar
Sean Magyar

Reputation: 2380

carrierwave AJAX upload with remotipart

In my rails4 I would like to submit a form via AJAX that has a file uploaded via carrierwave. As far as I know it can be done via remotipart, but can't figure it out how I can do that. (Remotipart installed properly since it's working with refile gem that I also use in the app.)

With the current code below the form gets submitted according to the logs and it says the create.js.erb is rendered, but the code in the create.js.erb file never runs.

Rendered posts/create.js.erb (387.0ms)

What should I do?

form

<%= form_for @post, remote: true, method: :post, :html => { :multipart => true, class: "post-create-form" } do |f| %>
  <img id="img_prev" style="margin-bottom:10px;" width=300 height=200 src="#" class="img-thumbnail hidden"/>
  <%= f.text_area :body, placeholder: "Share something useful..", class: "form-control post-create-body" %>
  <%= f.button "SHARE", class: "btn btn-primary btn-sm btn-create-post", data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Saving..."} %>
  <span class="btn btn-success btn-sm btn-message-file">Upload Image
    <%= f.file_field :post_image, class: "choose-message-file", id: "avatar-upload" %>
  </span>
  <%= f.hidden_field :post_image_cache %>
<% end %>

create.js.erb

$('ul.errors').hide();
$('.alert-danger').hide();
$('.post-index').prepend('<%= j render @post %>');
$('.post-create-body').val('');
$('.btn-create-post').prop('disabled',true);

_post.html.erb

    <div class="col-md-2">
      <%= link_to user_path(post.user) do %>
        <%= image_tag post.user.avatar.url(:base_thumb), class: 'post-avatar' %>
      <% end %>
    </div>

    <div class="col-md-8">
      <div class="post-info">
        <%= link_to user_path(post.user) do %>
          <span class="post-user-name"><%= post.user.full_name %></span>
        <% end %>
        <span class="post-updated"><%= local_time_ago(post.updated_at) %></span>
      </div>
      <div class="post-body">
        <%= simple_format(find_links(h post.body)) %>
      </div>
      <div class="post-image" data-postlink="<%= post_path(post) %>">
        <% if post.post_image? %>
          <button data-toggle="modal" data-target="#post-image-modal">
            <%= image_tag post.post_image.url(:base_thumb) %>
          </button>
        <% end %>
      </div>
    </div>

UPDATE: The problem is connected to updating the post object. The update form code can be found in the _post.html.erb, so that's why <%= j render @post %> didn't work. Still don't know what the problem is.

So what works: 1. creating post that has no image 2. updating post that has no image 3. updating post that has image BUT image is not edited Not working: 1. creating post that has image 2. updating post that has image which is edited

<%= form_for post, method: :patch, remote: true, :html => { :multipart => true } do |f| %>
  <div class="modal fade updatepost" id="updatepost_<%= post.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content" style="text-align:left">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="edittaskmodalohhhhh">Edit Task</h4>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger" style="display:none">
            <ul class="errors" style="display:none">
              <%= render 'layouts/error_messages', object: f.object %>
            </ul>
          </div>
          <div class="field form-group">
             <%= f.file_field :post_image, id: "avatar-upload-update" %>
             <%= f.hidden_field :post_image_cache %>
          </div>
          <div class="field form-group">
            <%= f.text_area :body, class: "form-control edit-post-body" %>
          </div>   
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="updatepostclose">Close</button>
            <%= f.button "Update post", class: 'btn btn-primary edit-post-submit', data: {disable_with: "<i class='fa fa-spinner fa-spin'></i> Saving..."} %>
        </div>
      </div>
    </div>
  </div>
<% end %>

update.js.erb

$("ul.errors").html("");
<% if @post.errors.any? %>
   $('.alert-danger').show();
   $('ul.errors').show();
   <% @post.errors.full_messages.each do |message| %>
     $("ul.errors").append($("<li />").html("<%= message.html_safe %>"));
   <% end %>
<% else %>
  $('ul.errors').hide();
  $('.alert-danger').hide();
  $('#updatepost_<%= @post.id %>').modal('hide');
  $post = $('<%= j render @post %>');
  editPostHideDanger($post);
  $('#post_<%= @post.id %>').remove();
  $(".new-post-insert").prepend($post);
  $("html, body").animate({ scrollTop: 0 }, "slow");
<% end %>

Upvotes: 0

Views: 372

Answers (1)

Sean Magyar
Sean Magyar

Reputation: 2380

There was some issue (still don't know what) with the bootstrap modals. I changed the structure of the modals and now it's working fine.

Upvotes: 0

Related Questions