Sonny Black Sonny Black - 8 months ago 72
Javascript Question

How do I show a thumbnail of the uploaded image instantly using Paperclip?

So in my app, users can upload an image to their blog. Now right when they choose the file I'd like to instantly show a thumbnail of the uploaded image so they know which image they've selected before pressing "Submit" on the form.

How might I do this?

here's my current code:

<h4>Name your blog<br />
& upload an image for it</h4><br />

<%= f.text_field :name, class: "blog-name", placeholder: "Name it here" %><br />
<%= f.file_field :image %>
----> I'd like to show the image here, instantly <----
<%= f.submit "Next", class: "next-button" %>
<% end %>


Paperclip cannot show image preview instantly. Paperclip is a plugin for Ruby on Rails ActiveRecord that lets files work as simply as any other attributes do. There are no extra database tables, only one library to install for image processing, and the ease of being able to refer to your files as easily as you refer to your other attributes.

You can achieve instant image preview using javascript/jQuery. Below is the code for showing image preview.

JSFiddle Demo.


<form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <img id="blah" src="#" alt="your image" />


function readURL(input) {

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {