Panoramio's Blog

In Panoramio we have redesigned the photo upload interface in a radical way.

I personally think the current widget to upload files used in browsers is horrible. It looks like a dynosaur from older times, when your files were named C:\hi.txt instead of C:\Documents and Settings\foo\My Documents\My Images\DSGN003.jpg. And don’t get me started on its lack of basic functionality: no way to select multiple files in one shot, no way for the webmaster to filter out the files to be show in the dialog box, etc.

This is how the new upload functionality looks:

Advantages of the new functionality:

1. Upload as many photos as you want at once

With the classic widget you have to upload photos in groups, for example 5 after 5. You need to pay attention to the end of the upload in order to select a new group of photos.

Now in Panoramio you can upload as many photos as you want at once at the same time, so you can do other things instead of waiting for uploading the next group or monitoring the process all the time.

Also in order to make the process faster, the upload start after selecting the photo, so you don´t need to press any “upload” button.

2. Did you choose the right photo to upload?

If your file is at C:\Documents and Settings\foo\My Documents\My Images\DSGN003.jpg the edit field it´s too short to see the name of the file you are uploading. How can you be sure you selected the right one?

Panoramio´s new upload system shows just the name of the file in edit field, not it´s location:

But when image file names are as “intuitive” as Dc2351.jpg is very easy to make a mistake. It´s very frustrating to realize you made a mistake only after finishing the long uploading process.

In order to prevent these errors, Panoramio shows you right away a small thumbail of the photo you are uploading (only in Internet Explorer), so you can cancel the uploading in progress.

3. Is it really uploading? How long it takes?

The most frustrating experience uploading photos is the lack of progress indication. Feedback makes easier to wait, that´s why long operations should always inform the user about the estimated time left and about their status.

In Panoramio we developed a progress that shows the time left to finish uploading. This progress bar thingie has been the hardest part. The only way to do it in current browsers it to poll the server regularly asking him for the size of the whole file, how much have already been uploaded, etc. That’s slow, badly supported by standard server technologies, brittle, and, in short, a hack. And to add insult to injury, the browser already has all that information! But instead of giving a nice javascript object so that we can know the status of current http connections we have to start playing games with the server to get that info. Sigh.

If you’re at 80% of the upload process, and something bad happens (your cat eats your ethernet link, for instance), then you’re left in the cold. You have to resend all these images again. Why? If the upload process gets interrupted, I want all the photos that have already being pushed in the server to remain safely there, so that I don’t have to start again from scratch. That´s how it works in Panoramio because each file is uploaded in a independent query.

4. No more “browse” button

People´s goal when uploading a photo is far from “browse”, they just want to “upload a photo”. Although it works only in Internet Explorer, we could substitute the “browse” button for a “upload a photo” link.

5. Map the photo and name it while uploading

This is a specific feature of Panoramio that optionally allows you to locate photos in a place at Google Maps. Previously, you had to find the place first and second upload the photo aftewards. That´s was slow and cumbersome if you are uploading many photos.

Now you first select the photo to upload and while waiting you can (optionally) map the photo. The process of mapping doesn´t interrumpt the uploading.

My only doubt concerning the current upload system is that it also lets you choose the title of your photo at the same time the image uploads. That’s nice because the whole process is done in one single screen, but at the same time it seems to be a bit confusing.

I hope you like the new upload system. The implementation took me longer time that I want to acknowledge

Special thanks to Raditha Dissanyake and Tomas Larsson for its work on a perl script to handle incremental the upload of files, and to Nicholas C. Zakas for discovering how to show up the file dialog box in Explorer from javascript (and submit that file without getting Access denied error messages).