Flickr’s Multi-Picture Uploader done in SilverLight


Sub Heading 5 

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

image

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

image

[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”.

image

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

image

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

image

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]

3dc7dc_1220152816

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.]

image

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.

3dc7dc_1220152815

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).

image

  

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:

image

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!

97 responses to “Flickr’s Multi-Picture Uploader done in SilverLight

  1. Sakthi Sai Saranyan

    Good Example

  2. Well done!

    More… :)

    -
    Scott Barnes
    RIA Evangelist
    Microsoft.

  3. Pingback: MS MossyBlog : FlickrUploader in Silverlight

  4. Pingback: FlickrUploader in Silverlight - Noticias externas

  5. This post is very hot, it is high ranked at adminor[dot]info (daily weblog, weblog post ranking site)

  6. Pingback: MSDN Blog Postings » FlickrUploader in Silverlight

  7. 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?

  8. 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.

  9. 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 ?

  10. Sirrocco, i’ve changed it from live’s skydrive to just the webserver. Try to download it now!

  11. Pingback: Silverlight Cream for December 21 -- #157

  12. 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).

  13. Pingback: Chris Mosby’s IT Blog » Blog Archive » Silverlight Cream for December 21 — #157

  14. 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’).

  15. 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 :-)

  16. Pingback: More photo fun. « geeksteve

  17. Pingback: Large file uploads in ASP.NET - Jon Galloway

  18. Pingback: Q. Does Silverlight have offline Database support like Flash. - Noticias externas

  19. Pingback: MSDN Blog Postings » Q. Does Silverlight have offline Database support like Flash.

  20. 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.

  21. 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

  22. Pingback: IvyJohn.us » Blog Archive » ASP.NET 中附件上传的处理办法

  23. 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

  24. Hi Kevin you should read John Galloways comment above. He discusses the issue of large files..

  25. 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.

  26. Anybody sure that IS in SilverLight 2 will be configurable?

  27. Pingback: Wöchentliche Rundablage: WPF, Silverlight 2, ASP.NET MVC, .NET 3.5… | Code-Inside Blog

  28. 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?

  29. 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….

  30. I am also facing the same problem…

    Its not working in VS 2008, Silverlight 2.0…

    Can anyone help plzzzzzzzzzzzz……..

  31. 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 :) )

  32. 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

  33. 2 days already gone sir…

  34. wow… the pressure! :)

  35. no no…not at all… :)

  36. 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…

  37. 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.

  38. vexl pwsjzq qzwb imap afrmndoi sitgn ftzqvkdoc

  39. any progress…..

  40. awesome!
    looking forward to the update to 2.0beta!

  41. 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.

  42. thanks!I’ll wait for it.:)

  43. Can you provide the code in 1.1? It seems the download lonk has been expired early this month.

    Thank you.

  44. Hi,

    I will try to do an uploader component and i find your article. Your componet seems cool and i want to learn with your example.But the link is broken :(
    Can you provide your code in silverlight 2.0 beta 2 on an another place.
    Thank you

  45. Gawd you gotta love the web and how fulla shit it can be. There I was getting all excited for a momnent and bang!! it leads to parked domain… what a let down worse than my wife saying she’s got a headache.

  46. Hi

    The http://www.ripthatpod.com/FlickrUploadTool.zip is not available, the site is down. So please let me know where i can download this code..?

    Thanks

  47. any news on silverlight 2.0 beta 2 code?

  48. Ive done a conversion of this for Silverlight Version: 2.0.30523.8 , im just wondering, does anyone know how to apply scrollbars for the list of files?

    By the way, if anyone wants a copy of the new version, just email me.

    And cheers!! to Liquid Boy for this great sample

    Thanks.

  49. Jason: where can we email you?

  50. Pingback: Silverlight multi-file upload controls and patterns

  51. Pingback: Silverlight Mulit-File Upload und Muster at Blog von Jürgen Ebner

  52. Jason,

    Where can one email you for the updated code?

  53. Pingback: xsi64’s blog » Blog Archive » [转]在ASP.NET中处理大文件上传

  54. how can one obtain the 2.0 version

  55. Hi Jason, could you send me the code of this upload control?
    I’m trying things out in Silverlight, which really rocks, and your control would be of great help!

    Thanks!

    Kind regards,

    Koen

  56. Jason, do you have the code posted anywhere that you can share? Codeplex maybe?

  57. Hello,
    I was also wondering if you had any code examples? Especially for the server side web service that handles the upload.
    Thanks

  58. of Flickr there’s a cool Silverlight Multi-File Upload Tool for Flickr

  59. content.foxsearchlight.
    http://www.bildermax.com

  60. @Jason Gaylord , @Carlos , @timheuer ,
    and for anyone else who needs the code, email me at jasonryan.pineda@gmail.com.

    Once again, cheers to advertboy for this sample.

  61. Anyone know where to download the code? Would like to check out the project in the article. Trying to learn silverlight better. I emailed jasonryan.pineda@gmail.com. but didn’t get a reply. Thanks!

  62. Hello
    I can’t download the code !
    can you send it to my email?
    Thinks very much!

  63. pelase email me at daiguoxin_521@163.com
    Thinks!

  64. Мне, например есть чем поделиться, думаю не только мне.

  65. I’ve learned some new things through your blog post. One more thing to I have discovered is that in many instances, FSBO sellers will reject you. Remember, they might prefer never to use your solutions. But if you actually maintain a gentle, professional romance, offering assistance and staying in contact for four to five weeks, you will usually be able to win an interview. From there, a listing follows. Thank you

  66. Pingback: 在ASP.NET中处理大文件上传 (转) | DBNull的博客

  67. Pingback: جلب الحبيب

  68. You have mentioned very interesting details ! ps nice website . “Every man over forty is a scoundrel.” by George Bernard Shaw.

  69. Hello, of course this piece of writing is genuinely fastidious and I have learned lot of things from it regarding blogging.
    thanks.

  70. Keep up the great work , I read few articles on this web site and I conceive that your website is rattling interesting and contains bands of great information.

  71. Good post, well put together. Thanks. I will be back soon to check out for updates. Cheers

  72. Nice work! Just what I was looking for..Hoping for more!

  73. Great Post, I love to read posts that are informative and acutally have good content. Thank you for sharing your experiences and I look forward to reading more.

  74. Hence the issue is how to treat hemorrhoids naturally? Lots of people which includes myself have asked this question to medical doctors and friends alike.

  75. Looking for some more. :(

  76. Really cool tips bro, appreciate it!

  77. Great and helpful article! Thanks!

  78. Needed to create you that bit of observation just to say thanks again for your great
    knowledge you’ve discussed on this site.

  79. Hello, I think your website could possibly be having browser compatibility issues.
    Whenever I look at your website in Safari, it looks fine however, when opening in I.E., it’s got some overlapping issues.

    I simply wanted to give you a quick heads up!
    Apart from that, excellent site!

  80. Do you have a spam problem on this website; I also am a blogger,
    and I was curious about your situation; many of us have created some nice methods and we are looking
    to swap strategies with others, be sure to shoot me an email if
    interested.

  81. I every time used to read piece of writing in news
    papers but now as I am a user of web so from now I am using net for articles, thanks to web.

  82. Yes! Finally something about how to cheat in goodgame empire.

  83. I’ve recently started a web site, the information you offer on this web site has helped me tremendously. Thank you for all of your time & work.

  84. You need to move your fingers as fast as you can to kill
    the stick men. Without gratiss crystals insiude
    animal vvoyage you will discover yourseelf waiting plenty of time for things
    to be created, wont be able to go on the next great vacation, and dont think about unlocking every one of the
    animals, it would probably never take place. There is where gamers
    that cheats for fun plays in.

  85. There was nno material reward ffor the player submitting the high score, but when
    you’re dealing with a developer as fixated on mechanical perfection
    as Nintendo an outcome like this isn’t terribly surprising.
    Ever wanted to all of those hard and tedious tasks legit. Cheats
    were the replay value of any game bahk in the day.

  86. Have you ever considered about adding a little bit more than just your articles?
    I mean, what you say is fundamental and everything.
    Nevertheless just imagine if you added some great
    photos or videos to give your posts more, “pop”! Your content is excellent but with pics and videos, this website could definitely be one of the best in its niche.
    Fantastic blog!

  87. obat kutil kelamin

    you’re dealing with a developer as fixated on mechanical perfection
    as Nintendo an outcome like this isn’t terribly surprising.
    Ever wanted to all of those hard and tedious tasks legit

  88. obat kutil kelamin di apotik

    nice article maybe I can wait new article from your site

  89. I proud with your blog it’s very inspiration

  90. Nice article ! Thanks for sharing such superb information here on the web. Press Release Distribution

  91. Hey! Quick question that’s entirely off topic. Do you know how to
    make your site mobile friendly? My blog looks weird when browsing from
    my iphone4. I’m trying to find a theme or plugin that might be able
    to resolve this problem. If you have any suggestions, please share.

    Appreciate it!

  92. Ketika seseorang berusaha menjauhi hidupmu biarkanlah. Kepergian dia hanya membuka pintu bagi seseorang yang lebih baik tuk masuk.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s