Previewing an image after it has been submitted through AJAX (Rails solution)?

Question

I'm trying to see what is the best way to implement a mechanism as in use here: https://sortfolio.com/signup . Essentially, one selects a picture to be uploaded. Picture uploads in the background and then it appears on the page with no refresh required.

So far I manage to do the POST of the image (I'm posting to an IFrame, using a jQuery plugin) and show the progress bat. I don't quite understand, when / how to pull the image back.

I'm using paperclip for processing.

Any thoughts ?

Thanks.

Answer 1

In your Rails controller, when responding to an AJAX request, send back the newly uploaded image URL, the entire image as a JSON object (w/ URL included), or the partial HTML to render the image.

For example, using the first method, use jQuery to set the src of the img.

Something like within the callback of the AJAX request:

$('#image').attr('src', /* url sent back from AJAX request */);