Image Uploads with 100% Less Suck. Guaranteed.
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.
31 comments
Jason says
I think this is a great little enhancement that makes a big impact on a user's experience. However, there is only one issue I would consider changing in the implementation. I've never seen an href attribute on an input element before. I realize that technically one can add any attribute to any element and browsers (today) still handle it gracefully, but it's definitely not something I recommend. Especially considering the data you are storing in the href is already in the page. I assume the form is progressively enhanced with JavaScript so users without JS will still receive the upload form. This means the target of the form should be found in the action attribute of the form element. Simply pass along an additional hidden form field or HTTP header indicating the form submission is via AJAX and the same server side handler can be used for both AJAX and non-AJAX uploads.
Ilya V. Azarov says
This feature needs good internet connection from clients. Not for Russian reality I think. Better would be organize clientside preview. But AFAIK JS would not allow that because it's insecure.
Mark Perkins says
Nice - but you don't actually need to send the image to the server to achieve this - at least not in IE and Firefox!
See: http://code.google.com/p/image-upload-preview/ (created by the crazy-clever Hedger Wang)
Maybe you could incorporate this with a fallback to Ajax for webkit browsers? Just an idea, would save a server call for a lot of users.
Matt (ZURB) says
@Jason: Point taken. I have updated the demo to use the form action rather then the href from the file input.
@Mark: Very cool, I can see how combining that with a overflow hidden div would allow us to crop the image client side as well.
B V says
I have no idea what it is but for the life of me I cannot get this to work. I've pretty much resorted to copy pasting your whole page and the farthest the script gets is displaying the loading image (the script doesn't seem to get into the onComplete call)... any ideas!?
Matt (ZURB) says
@B V: Can you provide a link to the page where it's not working?
B V says
Have a look at http://bijanvaez.com/image_upload_test/
Andy Stratton says
Dude, just have to say this is some nice elegant work. Wonderful experience and beautiful, clean design on the demo.
Matt (ZURB) says
@B V: You need to change the action of your form element to point to your own page which will upload the image and return a link to the thumbnail.
B V says
@Matt, doesn't seem to fix the issue (my tracing leads to the code halting at AddEvent call in the getResponse method). Mind discussing over email? Don't want to spam your comments section :)
B V says
@Matt, wow sorry, I didn't realize the apparent issues with AJAX uploads and thought this was a pure JS solution :) I feel quite dumb now but all is well.
And yes, a very elegant solution! Thanks for posting this.
Matt (ZURB) says
@B V: Glad you got this working.
We got a question from someone asking how you can tie the uploaded file to the rest of the data in the form since the input element in our examples does not actually get populated with the selected file.
The answer is that you don't want to submit the file when you submit the form. Submitting forms with file elements are very slow and create the perception that the site is slow, when really you're waiting for the file to upload.
In our example you still have to wait for the file to upload, but you see a spinner tied to the file upload and understand why you are waiting. When you submit the rest of the form you are only posting non-file elements and will get a very snappy response.
Regarding the actual implementation, you will need to treat the AJAX file upload and for data post as if they were two different forms updating the same record. You will need to embed the id of this record (new or existing) when you AJAX upload the images or post the data in your form.
Klaus says
Hello, i use your image uploads-script. But i have a question. The script is functional, when i klick in the textfield, but when i click on the "Browse"-Button, only the name and path of the file is in the textfield and not is going. What make i false?
Greetings Klaus
Klaus says
Hi, i had the incorrect width for input-element. Now it go's.
Kirow says
Hello
I'm a beginner in Ajax / JavaScript and I really can not set up your script! There would be no link to download the script? Or if someone can help me set up!
Thank you! (Great Script)
Faissal says
I remember having created something similar for an eCatalogue almost two years ago. Having a listener checking the input (File) state change (Prototype's TimedObserver) and triggering the upload. I think I got the idea from Yahoo! at that time. Did I miss something in this post? :-)
Hello says
Hello
I'm a beginner in Ajax / JavaScript and I really can not set up your script! There would be no link to download the script? Or if someone can help me set up!
Thank you! (Great Script)
Dennis says
I can't get the thumbnail to show up. Is there a download for the code? Thanks great job
Matt (ZURB) says
@Dennis: You'll need to download and link jQuery and the AJAX Upload plugin. This snippet of code shows what you need to add to your page. You may need to change it slightly based on your markup or needs.
Dennis says
I think thats what I have. Demo http://arizonabanner.com/ajax_upload.html I was comparing it to http://arizonabanner.com/index.html Thanks
Matt (ZURB) says
@Dennis: Looks like the action of your form element is pointing to ajax_upload while the other example that is working is pointing to ajax_upload.php.
madhu says
plz provide link for downloading ajax upload (Image Uploads with 100% Less Suck. Guaranteed)
umair says
heelo best wabsite is zurb
Stefanek says
Can't get it into work... Can you send me HTML + PHP files? michal [monkey] stefanow.net :)
