I have covered uploading files using Silverlight in a previous article: Silverlight View Model Style File Manager Drag and Drop Upload. In that article, you drop a file and it is uploaded immediately. However, while working on a Silverlight client for my popular Open Source Help Desk software program ADefHelpDesk.com, I realized that I needed to create an interface that allowed a user to select a file for upload, enter information on a form, and have the information saved, and the file uploaded with the push of a single button.

In addition, Silverlight allows a user to drag and drop a file, or to click a button and browse for a file. Also, if a user selects a file to upload and changes her/his mind, she/he needs a way to remove that file.

Therefore, my goals for an upload control were:

Easy to integrate into my existing View Model / MVVM projects

Allows a designer to use Microsoft Expression Blend to fully redesign all visuals and animations

The Upload Experience

When you run the example, you will see a file upload control that allows you to either browse for a file, or to drop a file on the space marked Drop File Here.

After you select a file, the Upload button will be enabled and you can click it to upload the file.

A button with a X will appear, and you can click that button to remove the selected file. Hovering over the file name will display a popup that shows the full name of the selected file.

When you click the Upload button, the upload control will display an animation to indicate the file is being uploaded.

After the file is uploaded, the file will display in the list box below the control.

The Upload Control

All the Silverlight code for the upload control is contained in the ADefFileUploadControl folder. The website code is mostly contained in the Webservice folder.

The Visual State Manager is used to define 3 Visual States for the control.

One for NoFileSelected, one for FileSelectedState, and one for FileUploadingState.

Behaviors are used to provide the primary functionality. The diagram above shows how the DropFilesToUploadBehavior and OpenFileDialogBoxBehavior are bound.

View Model / MVVM For Maximum Flexibility

Using Behaviors allowed me to create a control using as much code as I would using code behind. What I gained however, is the ability to create a completely different view with different animations and UI yet still uses the same View Model.

Thanks for leaving a comment (and your vote). I hope I kept everything separated enough so you can easily fit this into your projects. My goal was to give myself (and you) something you can integrate easily.

Is it require to do the Filename shortening explicitly? You can use the string Trimming for TextBlock very easily. Just a thought but anyway the article is really good to give a +5, as always. Good one.

This is an unnecessary cast - it's already an object. The method CheckFileExtension uses a really long winded test; I'd use an array or list of the extensions and a single lookup instead (also, you call the Path.GetExtension method multiple times, you should only call it once). On top of this, you use .ToLower(), why not perform a case insensitive comparison instead with string.Compare? On top of that, you don't need to do an if/else there, you could just return the comparison.

Those really minor quibbles aside, this is an excellent article. Have a 5.

I have CDO, it's OCD with the letters in the right order; just as they ruddy well should be