How do I implement image preview using Rails and jQuery?

Question

I've spent the last few days reading over different ways to implement an "Image Preview" before form submission feature on my website.

I've used HTML5 to get this working successfully on some browsers but not on all. This seems to be such a hassle so I've decided the best way to do this would be to have the image the user selects automatically upload to a temporary folder on the server so it can be displayed back to them after.

Details

This image is part of a micropost.

• User clicks micropost text area and it expands showing them a camera image which they can click on to select an image.

• After successful selection I'll use JQuery's trigger method to trigger the submission of a small form that uploads the file to a temp folder.

• This will allow me to show a progress bar while the upload is taking place then display the image back to the user. It will work on all browsers.

• Then if the user decides the image is fine they'll continue filling out the micropost forms text area and click post.

• When post is clicked the temp image will be moved to it's permanent position and the path will be updated.

I'm using carrierwave for image upload.

In my microposts table I have an image column which holds the path of the image.

Here is where I get slightly confused. I'll have to some how get the path of the image when the micropost post button is clicked so it can be stored in microposts table but the path will be the temp path that won't be used any more because the image would have been moved to it's permanent path.

I'd really appreciate great info on a straight forward way of doing this. The web world would be so much different if web browsers were quite like cars (eg 4 wheels, steering wheel, windows, petrol, diesel).

Answer 1

You shoud use this jQuery plugin for your pics uploads: http://blueimp.github.com/jQuery-File-Upload/

It supports what you need and defaults to working solutions (iframe for instance) for old & crappy browsers.

Enjoy!

Answer 2

I think that if you only need image preview in a form before upload, you (as me) will see that JQuery Upload plugin is just too much complex and not so easy to run properly (I was able to see the preview, but then I couldn't upload the picture because it messes with your form). I spent too much time and gave up.

Then, looking (googling) deeper, I found this solution:

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

It's really simple and fast to code.