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!
43 responses so far ↓
Sakthi Sai Saranyan // December 21, 2007 at 1:50 am
Good Example
Scott Barnes // December 21, 2007 at 2:47 am
Well done!
More…
-
Scott Barnes
RIA Evangelist
Microsoft.
MS MossyBlog : FlickrUploader in Silverlight // December 21, 2007 at 2:47 am
[...] Silverlight guru, Liquidboy (Jose) has put together a sweet ball of code which essentially allows you to upload Flickr photos [...]
FlickrUploader in Silverlight - Noticias externas // December 21, 2007 at 2:58 am
[...] Silverlight guru, Liquidboy (Jose) has put together a sweet ball of code which essentially allows you to upload Flickr photos [...]
frmad // December 21, 2007 at 3:00 am
This post is very hot, it is high ranked at adminor[dot]info (daily weblog, weblog post ranking site)
MSDN Blog Postings » FlickrUploader in Silverlight // December 21, 2007 at 4:35 am
[...] Silverlight guru, Liquidboy (Jose) has put together a sweet ball of code which essentially allows you to upload Flickr photos [...]
Simone // December 21, 2007 at 9:55 am
Cool app… I would have expected something that was different from the standard Flickr UI, but it’s a nice tecnology proof of concept.
But to which Flickr account is it uploading to?
advertboy // December 21, 2007 at 1:25 pm
Hey Simone, it doesnt actually post to flickr yet. It is based on the flickr picture upload tool. It post’s to a custom webservice on the server but it’s easily extendable to push to flickr via that same web service.
sirrocco // December 21, 2007 at 5:00 pm
I can’t download :-< . I have to login to windows live , but it seems like it doesn’t work.
Can you place it somewhere else ?
advertboy // December 21, 2007 at 5:13 pm
Sirrocco, i’ve changed it from live’s skydrive to just the webserver. Try to download it now!
Silverlight Cream for December 21 -- #157 // December 22, 2007 at 12:02 am
[...] – More Silverlight - Handling Events Part 2 of Dave Wheeler’s Media Player building tutorials Flickr’s Multi-Picture Uploader done in SilverLight Liquid Boy has a cool article on uploading pictures to Flickr, and it’s with source
Stay in the [...]
Nikhil Kothari // December 22, 2007 at 10:11 am
Nice to see the functionality applied to a real-world scenario.
When doing samples for this stuff, as well as demos for MIX, one thing I used to do was simply hold on to the file references and open/read them as I uploaded the content - rather than storing them in isolated storage as an intermediate place… that ensured I didn’t bump into the 1MB limit (which btw, we’re fixing).
Michael Sync // December 22, 2007 at 11:11 am
nice one..
Chris Mosby’s IT Blog » Blog Archive » Silverlight Cream for December 21 — #157 // December 22, 2007 at 2:14 pm
[...] Flickr’s Multi-Picture Uploader done in SilverLight [...]
advertboy // December 22, 2007 at 8:42 pm
Thanks Michael,
Nikhil completely agree that with you there. I did plan to store the images (streamed as strings) in an arraylist on the client’s end rather than in the IsolatedStorage(IS). And only throw the string stream(image) into the IS when i needed to do some file based manipulation.
Will do this for a future version. Also nice to hear they are going to fix the 1Mb Isolated Storage limit. Would love it to be like Flash where you can set it via the clients config tool (right clicking context menu then ’space’).
Nikhil Kothari // December 23, 2007 at 5:30 am
Just a quick clarification - I wasn’t suggesting holding onto the contents of the files in memory, as that has the potential for shooting up the memory usage. Instead if you hold on to the file objects that the OpenFileDialog hands out, you can open the files as you need to do so, and essentially stream the bits to the server. If you’d like check the ajax uploader sample I did for TechEd Au/NZ(http://www.nikhilk.net/Entry.aspx?id=169). Anyway, this is a relatively minor point at this moment. The sample stands up well as-is to demonstrate the power!
Stay tuned for the improvements in SL2.0 over the alpha in terms of isostore APIs - I think you’ll be pleasantly surprised
More photo fun. « geeksteve // January 5, 2008 at 5:25 pm
[...] of Flickr there’s a cool Silverlight Multi-File Upload Tool for Flickr (with source code!). Its written in Silverlight 2.0 (previously named Silverlight 1.1). [...]
Large file uploads in ASP.NET - Jon Galloway // January 8, 2008 at 9:13 am
[...] to be a project / component to support Silverlight uploads yet, Liquid Boy has a nice sample of a Silverlight 1.1 (oops, 2.0) based upload control. I’ve heard good things about SWFUpload, a Flash and JavaScript based upload system. Developers are [...]
Q. Does Silverlight have offline Database support like Flash. - Noticias externas // January 26, 2008 at 2:21 am
[...] Flickr’s Multi-Picture Uploader done in SilverLight [...]
MSDN Blog Postings » Q. Does Silverlight have offline Database support like Flash. // January 26, 2008 at 3:30 am
[...] Flickr’s Multi-Picture Uploader done in SilverLight [...]
Fahad // January 26, 2008 at 3:49 am
I am trying to develop this type of application for my website, which is based on php + MYSQL.
Does this type of app require the user to download anything, or is it possible to implement this without having the user have to download.
I am thinking along the lines of Ajax, Flash etc.
Dont know if this is possible.
advertboy // January 26, 2008 at 8:19 pm
Fahad this sample needs a downloadable plugin.. to achieve this same user experience from an ajax toolkit will be very very difficult! But I havent done much research on this so I cant say that with certainty. Goodluck
IvyJohn.us » Blog Archive » ASP.NET 中附件上传的处理办法 // January 28, 2008 at 3:07 am
[...] a sample is available showing how to upload multiple files with Silverlight. [...]
kevin // February 26, 2008 at 1:16 am
Now I am in this situation:
(1) Large files to be uploaded (let’s say a few hundred MBs) that will easily exceed 1MB;
(2) I may need to upload these files asynchronously ( save them at first and upload later without having to select the files again).
Can’t find a good solution. Any ideas?
Thanks,
kevin
Jane Casamento // February 26, 2008 at 1:26 am
Hi Kevin you should read John Galloways comment above. He discusses the issue of large files..
kevin // February 26, 2008 at 6:54 pm
Jane, you are right. John has a good post on that.
Actually my situation is a bit complicated.
(1) I can’t use any third party components;
(2) Files to be uploaded are really huge. A few hundred MBs is very often. We are moving from standalone App to web app and this is becoming a big trouble;
(3) I need to persist the file processing status. Usually after the user selects multiple files, the files will be uploaded to the server, and then each file will be processed on the server. Because the whole process is long and very likely to get errors, we need to let the user pick up the last state whenever he or she launches the browser again. That means, the user should not use the FileOpenDialogbox to select the files. Instead, the browser should be able to retrieve the files selected last time and their corresponding process status and then decide to continue uploading or processing.
(4) Rich UI is required.
kevin // February 27, 2008 at 12:08 am
Anybody sure that IS in SilverLight 2 will be configurable?
Wöchentliche Rundablage: WPF, Silverlight 2, ASP.NET MVC, .NET 3.5… | Code-Inside Blog // March 31, 2008 at 7:03 pm
[...] Flickr’s Multi-Picture Uploader done in SilverLight [...]
rogan // May 15, 2008 at 2:29 pm
Hi,
I downloaded your code but struggling to get it to work. I think its because I’m working in VS 2008 with Silverlight 2.0 beta. Any quick and easy way to get it running in my environment?
roncansan // May 16, 2008 at 5:32 pm
Hi,
I have VS 2008, Silverlight 2.0, and MS Silverlight Tools Beta 1 for VS 2008. When I open your project I have problems with the following references: System.Silverlight, System.xml.core and arg”something”.
Any news….
Tahir // May 29, 2008 at 1:57 am
I am also facing the same problem…
Its not working in VS 2008, Silverlight 2.0…
Can anyone help plzzzzzzzzzzzz……..
advertboy // May 30, 2008 at 2:10 am
sorry guys im trying to rewrite this in silverlight 2 beta 1 but its taking longer than expected. I hope to get this working in the next week (it really is hard to find the time to rewrite these samples, what did i get myself into
)
Peter // June 2, 2008 at 5:33 pm
Hello
I really liked youre control and was therefore wondering how you are doing with the convertion to silverlight 2?
Do you think you will have it out this week?
tnx
Tahir // June 3, 2008 at 2:43 am
2 days already gone sir…
Tahir // June 3, 2008 at 2:43 am
advertboy // June 3, 2008 at 3:29 am
wow… the pressure!
Tahir // June 5, 2008 at 4:13 am
no no…not at all…
Jess // June 10, 2008 at 9:28 pm
haha!!! Coffee reduces pressure!!
I have converted Silverlight 2.0 Beta 1 to Beta 2 and it is not always easy, the simplest tasks seem to be monumental. Keep us posted… Im excited to see what you can come up with…
Michael // June 20, 2008 at 6:01 pm
Any progress on the update to 2.0? I tried doing the conversion myself and I can’t say I was too successful. I’m looking forward to seeing a working conversion.
trjkad qjwgh // July 13, 2008 at 4:18 am
vexl pwsjzq qzwb imap afrmndoi sitgn ftzqvkdoc
Tahir // July 15, 2008 at 6:28 am
any progress…..
yww // July 17, 2008 at 1:23 am
awesome!
looking forward to the update to 2.0beta!
Pratik // July 17, 2008 at 9:18 am
Hello,
I download your project but i have a problem.
ParserError- XamlReader.Load() does not support x:Class.
File: FlickrPictureUpload.xaml, line 7 character 53.
So i think x:Class attribute is not in Canvas.
Leave a Comment