Question

I know this sounds like a stupid question, but I really don’t see the root cause right now…

I just figured out to upload image using ajax with the help of jQuery-File-Upload and Paperclip, everything is quite fine, the file is uploaded, the database entry is successfully saved.

The only problem is the <%= image_tag @attached_image.image.url %> is not working in my create.js.erb, with which I would like to make an entry on the view with javascript. But the url of the uploaded file instance is correct.

it’s working if I do:

$("#attached-images").append("<li><img src='http://localhost:3000<%= @attached_image.image.url %>'></img></li>")

but it’s not working if I do, which is from Paperclips Github Readme:

$("#attached-images").append("<li><%= image_tag @attached_image.image.url %></li>")

and there’s no exception raised in the console, there’s just nothing comes up. I am really confused..and is there anyway that I could debug the js.erb processing in the browser?

My view:

<div id="upload-and-insert-image-dialog"> 
<%= form_for :attached_image, :remote => true, :url => attached_images_path(), :html => { :class => "upload", :multipart => true } do |f| %>
  <%= f.file_field :image %>
<% end %>
</div>
<ul id="attached-images">
</ul>

My controller:

class AttachedImagesController < ApplicationController
  def create
    @attached_image = AttachedImage.new(params[:attached_image])

    respond_to do |format|
      if @attached_image.save
        format.js
      else
        format.js { render 'attached_images/create_error' }
      end
    end
  end
end

My attached_images/create.js.erb:

$("#attached-images").append("<li><%= image_tag @attached_image.image.url %></li>")

My model:

class AttachedImage < ActiveRecord::Base
  belongs_to :attachable, :polymorphic => true

  has_attached_file :image
end

Answer 1

I found the problem, it’s because that I missed the escape_javascript function, the following code works very well.

$("#attached-images").append("<li><%= escape_javascript(image_tag(@attached_image.image.url)) %></li>")

many thanks to @varatis, you remind me of that.