in Tech

Summer 2014 Hackathon Project: Using HTML5’s File API to Improve User Experience

For the summer 2014 hackathon, we (the Tagged interns) decided to work on a project to improve the user experience for the “Add Photos” section of Tagged.

Originally, the buttons for uploading photos from your computer and adding images from URLs looked very different from each other, and they were a bit outdated in terms of design. Using modern HTML and CSS, we were able to give them a refreshed look. Also, the photo upload button was a plain HTML5 file upload button, which is implemented differently in different browsers. With the restyled button, users will get a consistent experience across all browsers.

“How to style an HTML5 file upload button?” is a question that has been asked many times in recent years. We decided to go with a simple, browser-friendly solution. We wrapped the upload button with a <label> element, then used CSS to hide the actual button and add the visual styles to the label.

Hiding the button is not as easy as you’d expect if you want this method to work across a wide range of browsers. A simple “display: none” works on most browsers, but in others, clicking the label with the upload button hidden in this way would not bring up the upload dialog. We used the following CSS to hide the button, which works on all browsers used today:  “position: absolute; width: 0; height: 0; outline: 0”. Using absolute positioning removes the button from the document’s main flow, so other elements aren’t affected by it, and giving it 0 height and width effectively makes the button invisible. Finally, the outline is hidden so WebKit browsers don’t show a ghostly glow floating where the actual button is when the label is clicked.

After that, it was just a matter of styling the label into a visually-appealing button. We used CSS3’s linear-gradient for the background with a solid fallback color for older browsers.

This simple styling method also allowed us to apply the exact same styles to the URL image upload button (which is a normal submit button), so no CSS was duplicated in the stylesheet.

We also decided to fix up the layout of the photo uploader to make it more clear what photo sizes are accepted on Tagged. Currently, users cannot add photos larger than 5 MB, but there was no way for them to know this unless they tried to upload a larger photo. Users would then receive an error message after uploading the file to the server. To avoid this headache, there is now a clear indication that files larger than 5 MB are not accepted.

Originals:

Restyled:

The general method for verifying user-uploaded content is to allow the content to be uploaded to the server for processing, and if it is deemed acceptable, it is then passed on to the necessary handlers. However, doing this takes up bandwidth, server resources, and time (most importantly, the user’s time!), which ends up being a lot of wasted effort for content that is rejected.

Nowadays, modern browsers give us some powerful tools to process content client-side, which can help reduce the sort of efforts mentioned in the previous paragraph. For our hack, we use HTML5’s File API to check the size of photos in the user’s browser before they are uploaded, and cancel the upload if the file is too large. This provides users with instant feedback if the photo they tried to upload doesn’t meet the size requirements. This feature requires the user’s browser to support the File API. Thankfully, over 92 percent of desktop users today use a browser that supports it (according to aggregated stats from W3C, MDN, and caniuse.com). For older browsers, we still reproduce the old functionality.

As an aside, we’d like to mention that client-side checking of user content will never replace server-side verification. JavaScript is easy to bypass (or avoid altogether with non-browser web clients), so it’s always necessary to verify uploaded content before storing it on a server or displaying it on a website.

Finally, during the upload process users receive updates on the status of the upload (i.e., uploading, error, success). Previously, these notifications would disappear after a second or two, so users might have missed what was going on. We simply changed the code so that each notification stays on the page until the user dismisses it or a new one takes its place. This reduces the gulf of evaluation of photo uploads to provide a better experience for our users.

Failure:

Success!!

Simon Luo, Andrei Lee, and Ranit Dubey contributed to this post.

Nathan Woltman

Nathan Woltman is a software engineer intern at Tagged.

More Posts

Follow Me:
GitHub