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-21 17:45:36Z

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, 2013 at 17:45

answered Oct 18, 2013 at 8:37

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Blake Geist Over a year ago

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?

Richard Peck Over a year ago

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');

Blake Geist Over a year ago

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?

Richard Peck Over a year ago

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 Over a year ago

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 :)

|

Collectives™ on Stack Overflow

Jquery file upload in rails 4

1 Answer 1

15 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related