Jquery file upload in rails 4

Question

Hi everyone i am following the video tutorial for Jquery File Upload at http://railscasts.com/episodes/381-jquery-file-upload and am stuck. I after upload images my render partial does not refresh, it adds the new image and all other images under the image that was already attached. So if I add two images to a new item it shows the first image, then renders the partial again with the first image and the second image under the first so there are 3 photos in total.

Here is my create.js.erb

<% if @photo.new_record? %>
  alert("Failed to upload photo: <%= j @photo.errors.full_messages.join(', ').html_safe %>");
<% else %>
  $("#photos").append("<%=j render @photo %>");
<% end %>

Here is my render from my show page.

<div id="photos">
    <%= render 'photos/photo' %>
</div>

Here is my /photos/_photos.html.erb partial

<h2>Images</h2>
<div class="photo">
<% @rental.photos.each do |photo| %>
  <p>
    <strong>Photo:</strong>
    <%= image_tag photo.image_url.to_s %>
    </script>   
  </p>
 <% end %>
</div>

Here is my Photos Controller create

 def create
    @rental = Rental.find(params[:rental_id])
    @photo = @rental.photos.create(params[:photo].permit(:image))

    respond_to do |format|
      format.js
    end
  end

Here is my photos.js.jcoffee

jQuery ->
  $('#new_photo').fileupload(replaceFileInput: false,
    paramName: 'photo[image]')


    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_photo').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

Any help would be great, I'm stuck. Thanks!

Thank you so much Rich Peck his answer fully solved my problem. I had to change

<% if @photo.new_record? %>
  alert("Failed to upload photo: <%= j @photo.errors.full_messages.join(', ').html_safe %>");
<% else %>
  $("#photos").append("<%=j render @photo %>");
<% end %>

To

<% if @photo.new_record? %>
  alert("Failed to upload photo: <%= j @photo.errors.full_messages.join(', ').html_safe %>");
<% else %>
  $("#photos").html("<%=j render @photo %>");
<% end %>

Richard Peck · Accepted Answer · 2013-10-21T17:45:36.953

2

def create
    @rental = Rental.find(params[:rental_id])
    @photo = @rental.photos.create(params[:photo].permit(:image))

    respond_to do |format|
        format.js
    end
end

That's my first look at it

The fix was actually to use $('#photos').html() to replace the container. The OP was originally using .append to just append content to the container, which didn't work very well at all

edited Oct 21 '13 at 17:45

answered Oct 18 '13 at 08:37

Richard Peck

76,116
9
93
147

1

Hi Rich, thanks for helping. I have added the respond_to my create, and no change. I thought since the Rental needs to respond_to js the controller above it might need one as but I got a ActionController::UnknownFormat when I added the same respond to the rental create action. Any Other Ideas? – Blake Geist Oct 18 '13 at 15:59
Okay so the problem is either going to be that your JS is not rendering properly, or you have syntax errors in your create.js.erb. Firstly, you should take out all the current code in your create.js.erb & add a simple alert (to see if it's being called). You can call an alert like this: `alert('test');` – Richard Peck Oct 18 '13 at 16:32
Hey rich, I have done what you suggested, and the alert works, so that must mean the js is not rendering properly. Is there a way to track this down? – Blake Geist Oct 18 '13 at 17:10
Yep, it's just a case of working through the code to see what's causing the problem. I'd start with <% if @photo.new_record? %>alert('new')<% else %>alert('bad')<% end %> – Richard Peck Oct 18 '13 at 17:11
Your structure is okay - if the alert works, it means there is a problem with the actual code contained in the js.erb file you're working with :) – Richard Peck Oct 18 '13 at 17:12
Thanks for taking the time to help me out. So is this something I can change? Or should I just try a completely different a gem for uploading multiple files. – Blake Geist Oct 18 '13 at 17:18
No!! Paperclip is the best. It's just in your create.js.erb file - if you want to go to chat, let me know – Richard Peck Oct 18 '13 at 17:27
Hey Rich, I would like that very much. I cannot start one as I do not have enough reputation. Also this tutorial used carrierwave. – Blake Geist Oct 18 '13 at 17:32
Says you can't come into chat because you don't have enough rep :( Let's see if someone will upvote your question to give you the rep! Carrierwave & Paperclip are both great! I believe the problem is with your JS – Richard Peck Oct 18 '13 at 17:33
Awesome, I will check back in a bit to see if anything has changed. In the mean time would my photos.js.coffee file help at all? – Blake Geist Oct 18 '13 at 17:38
Your photo.js.coffee isn't going to be able to handle the callback from Ajax – Richard Peck Oct 18 '13 at 17:43
Have you got skype or something we could go to? – Richard Peck Oct 18 '13 at 17:45
for sure my skype is blakegeist – Blake Geist Oct 18 '13 at 17:50
Hey Rich, may I get your skype name? I still do not have enough rep to join a chat. Thanks. – Blake Geist Oct 19 '13 at 17:45
Just re-sent my request :) – Richard Peck Oct 19 '13 at 19:02

Jquery file upload in rails 4

1 Answers1

Linked