Go Directly to the Demo and Code →
We've all seen the basic file upload form for uploading avatars, images, memes, etc. The problem with these is that once you upload your image it's hidden from you. It's the same issue with masked passwords, you enter some data and then poof, it's gone. And not gone like sexy was gone, this is the kind of gone that not even Justin Timberlake can fix.
The file input is going to look something like this:
Did I upload a new picture of my face? Or maybe something less professional. It's like buying food at the grocery store, except you can't see what you have in your cart. Wait, did I just buy the diapers or the case of Tantrum (read highly caffeinated beverage)?
The solution is to use a little bit of JavaScript to upload the image as soon as it's selected and display a thumbnail so we can easily review the form before we submit it.
Head on over to the ZURB code playground to see a complete demo and breakdown of the JavaScript we use to accomplish this. The code playground is where we do crazy awesome stuff with JavaScript, HTML, and CSS.