Flickr’s Multi-Picture Uploader done in SilverLight

 

Update: I am in the process of re-writting this for Silverlight 2.0 beta. Stay tuned and keep checking back 🙂 

The current Flickr picture upload process is cool. It’s dead simple and makes multiple-picture uploading fun. The user experience is spot on and it really makes Flickr the killer picture sharing app that it is!

I’m going try to recreate it’s functionality using SilverLight!

Flickr’s Picture Upload Tool

Figure 1: Wizard page 1 – options to take for uploading pictures to Flickr

Figure 2: Wizard page 2 – choose the picture(s) to upload

[note: the pictures in the picture above are samples from my personal asset’s, I have selected them only for demonstration purposes]

Figure 3 : Confirm pictures for upload and begin upload by clicking “Upload Photos”.

Figure 4 : Upload process begins and the user is shown some simple cool animations showing the upload progress of each file.

Figure 5 : Upload is complete when all the files are grayed out and a tick appears against each.

The upload tool on Flickr goes further and allows you to tag the uploaded pictures. I’m going to leave that bit out!

QUICK ANALYSIS

Analysing the workflow of the Flickr upload tool you can easily see that the major component’s of the control are:

A) Multiple file selection tool (client side) – This control will allow the client to select multiple image files.

B) Client side storage of the selected files until the user explicitly clicks “Upload” at which point we upload the files to the picture server. There is the ability to delete pictures before sending to the server.

C) Progress indicator for each file as it is uploaded. This progress is in the form of a simple animation.

MY SILVERLIGHT SOLUTION

[my apologies for the hand drawn diagram, I’ve been typing so much recently I wanted to prove to myself that I could still physically draw]

1) User chooses pictures to upload using the “OpenFileDialog” class in SilverLight. This cool class allows you to multi-select pictures. [I have put in a limit of 8 files at any one time because I didn’t want to build a scroll area for the files list. Some future version will have a scrollbar that correctly allows you to select unlimited number of files.]

2) The upload control will be a fully encapsulated SilverLight control that sit’s on a web page

A) The upload control is a simple page.xAML with a container canvas that will house the list of selected images

B) This is the template usercontrol that represents a single selected image. It will by dynamically inserted into the container defined in (A) above.

3) The selected pictures need to somehow persist on the client browser until the user explicitly chooses to upload them. I want to use the “IsolatedStorage” features of SilverLight to do this. Basically the files chosen from (1) above are persisted into the isolated-storage until the user chooses to upload. Doing this allows me to get the file size and potentially manipulate the file prior to upload. The limitation is that the storage space is limited to 1mb. [For the purposes of the demonstration we will only allow uploads totaling 1mb per transmission]

4) The SilverLight control will send the image to a webservice over HTTP “POST” using the “BrowserHttpWebRequest” class. As an image uploads to the server an animation will play showing the progress of the upload (see diagram below).

  

Conclusion

This was a fun project that I learnt a lot from. Future SilverLight RIA applications, I believe, will make heavy use of the “IsolatedStorage” so definitely pick this skill up now people!

When SilverLight 2.0 comes out I’m hoping that there will be some cool new features that will allow me to do some simple client side image editing and manipulation. (cross my fingers)

To see the demo in action click the button below, you’ll need SilverLight 1.1 Alpha:

You can download the code here: Silverlight Multi-File Upload Tool.

And as always please send through your comments, I love a good conversation. And remember were all still learning so share what you can!