All Blog Posts

Storing Files in SQL Server using WCF RIA Services and Silverlight - Part 2

This is the second of three articles which will describe how you can create a Silverlight LOB application that stores and displays documents using FILESTREAM Storage in SQL Server 2008.
1. Configuring FILESTREAM in your database and WCF RIA Services setup.
2. Uploading and Saving files to the database from a Silverlight LOB application (this article).
3. Viewing files stored in the FILESTREAM from a Silverlight LOB application.

The purpose of this article is to show how you can setup a Silverlight application to allow users to drag and drop files on the application and have them automatically uploaded and saved via WCF RIA Services and the FILESTREAM in SQL Server.

Here is a picture of the screen design in our Silverlight application.

A few things to note:
  • A treeview control is used to display the folders
  • A grid control displays the documents for the selected folder
  • A rectangle control is used for the drop area
  • Documents can be viewed by clicking on the document title.  We will discuss how this is done in part 3.
  • An icon is used to display the file type of the document.  The extension of the file dictates which icon to use.
Here is the XAML for the drop area (I am omitting the rest of the XAML so we can focus on the drag/drop functionality).

You will notice a couple of things about this code.
  • The property "AllowDrop" is set to "True"
  • The Drop event is wired up (ImageDrop_Drop) to fire when files are dropped in the rectangle. This event will start the upload/save process.
  • The DragEnter and DragLeave events are also wired up. I find it is good for the user experience to  visually indicate something when hovering over the drop area.
Okay, now let's look at the events we just wired up. The first two events, DragEnter and DragLeave are used to change the opacity of the rectangle. You can do whatever you want here, but I prefer the subtleness of the opacity change.

Next is the Drop event. There are lots of moving parts here, so I'll show the code and then walk you through.

Here is the UploadImages method:

Some things to note about the Drop event and supporting code:
  • Multiple documents can be dropped at once. A Queue is a great tool to handle this.
  • We are using a class, UploadedDocument, to store information about each file being processed.  This will eventually be stored in the Document and File tables in SQL.
  • The file name and extension are pulled from FileInfo to be stored in the Document table. The extension property will be used to drive the file type icon in the grid.
  • The actual document is then streamed into the DocumentBuffer property, which will later be stored in the File table.
  • Once all of the UploadedDocument records are created then we create our objects in our ViewModel to be saved via WCF RIA Services.
  • For each file we create a File object, Document object, and AccountDocument object. The AccountDocument object is then tied to our main Account object. What we are doing here is adding a document to my Account.
The new objects are saved via WCF RIA Services and the databound grid is refreshed showing the file(s) which were added to the selected folder. That's it!  We now have documents being saved in our SQL database from our Silverlight application.

The third part of this series will show how to use a OpenFile Dialog to select a file(s) to be uploaded/saved as well as how to display the documents back to the user.