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 (e.g. 4 wheels, steering wheel, windows, petrol, diesel).
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!