Sonny Black Sonny Black - 2 years ago 148
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 %>

Answer Source

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


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download