Silverlight 4.0 - Uploading Multiple Files to the Server

Posted by: Mahesh Sabnis , on 6/17/2011, in Category Silverlight 2, 3, 4 and 5
Views: 54436
Abstract: This article demonstrates how to upload multiple files to the server using Silverlight 4.0

As part of Rich UX development, a Silverlight client application can also be used to upload multiple files from the client machine to the Web Server. Let us assume a business requirement as below:

The end-user is using a Silverlight application. He/she is writing application data in some files on the disk e.g. using a Rich UX Hospital Management System, the doctor creates a Case Paper for the patient along with ECG reports and blood sugar information. Now he wants to upload all these files  at once to the Web Server, so that these reports can be accessed from any other location. Well  in such cases, a Silverlight application with multiple file upload facility can definitely be helpful. In the code shown below, I have explained the mechanism of uploading multiple files using Silverlight 4.

Step 1: Open VS2010 and create a Silverlight Application, name it as ‘SL4_UploadingMultipleFiles_To_Server’. In the ASP.NET Host web Project i.e. ‘SL4_UploadingMultipleFiles_To_Server.Web’ project, add a Generic Handler and call it ‘UploadFileHandler.ashx’. This handler will contain code that accepts the file from the Silverlight application as a stream and writes on the disk in a specific folder. Also add a new folder in the Web project and call it ‘FilesServer’. This folder will be used to store uploaded files. The code is as shown below:

silverlight read write file

The method ProcessRequest accepts the input file to be written on the disk as a QueryString. The method shown above contains comments to help understand the code.

Step 2: Open MainPage.xaml and write the following Xaml code:

silverlight-xaml-upload-files

 

Step 3: Open MainPage.Xaml.cs and declare the following List<T> object which is used to display the files selected by the user for uploading.

List<FileInfo> filesToUpload;

Step 4: Write the following code in the Loaded event to create an instance of the List<FileInfo> object:

private void UserControl_Loaded(object sender, RoutedEventArgs e) {            

filesToUpload = new List<FileInfo>();

}

Step 5: Write the following code in the click event of the ‘Select Files’ button. This code will show the OpenFileDialog and will allow users to select multiple files. The code is as shown below:

silverlight-select-multiple-files

Step 6: In the code-behind, write a method which will write the uploaded stream in to the target stream. This method will be called asynchronously for opening and writing operations:

silverlight upload file data

Step 7: On the click event of the ‘Upload Files’ button, write the code shown below. This code will subscribe to the event handler created in Step 1 and call the asynchronous OpenWriteAsync method of the WebClient class to write the file to the output resource. The above code iterates for every file stored in the ‘filesToUpload’ List<FileInfo> class.

silverlight-multiple-file-upload

Step 8: Run the application and click on the ‘Select Files’ button, the result will be as below:

Silverlight Select Multiple Files

Select all the files that are to be uploaded and click on the ‘Open’ button, the files will be displayed in the ListBox as shown below:

Silverlight Listbox

Now click on the ‘Upload Files’ button, and open the FileServer folder in the explorer. You will find all the files uploaded.

The entire source code of this article can be downloaded over here

Give me a +1 if you think it was a good article. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Jimit on Friday, June 24, 2011 7:17 AM
You might want to use some chunking for large files.
Comment posted by Chan on Monday, November 28, 2011 4:43 AM
Sir, I have used your code to upload a image file into server folder. Its awesome. But I cant display directly the image to canvas after I stored the uploaded image into the folder. I use image source to access the url of the image but it cant display. Can you tell me what's the problem?
Comment posted by mohan on Wednesday, February 8, 2012 3:57 AM
Hi Mahesh, I wanted to use php as server site language for tha same example. How where should i entry my php file
Comment posted by deepak on Wednesday, May 2, 2012 2:38 PM
In silverlight, for uploading file this link is really good :)
http://interview-development.blogspot.in/2012/05/silverlight-upload-file.html
Comment posted by valentin on Monday, June 11, 2012 5:04 PM
why is not working on videos...
it creats the file, but the it has 0 kb.
Comment posted by valentin on Monday, June 11, 2012 5:09 PM
why is not working on videos...
it creats the file, but the it has 0 kb.
Comment posted by Denzil Sequeira on Sunday, July 15, 2012 1:15 PM
Sir, first of all I would like to thankyou for such a wonderful post .. Helped to make alot of concepts in this context.... But Sir I have a small doubt .. How to we convert the data from list to an ObservableCollection an then binding it to the ListBox... I would be really grateful to you if u shed some light for me on the above mentioned concept... Thankz In advance

Comment posted by Gustavo Magaña Cárdenas on Sunday, July 29, 2012 5:59 PM
Hola amigo, antes que algo mas, felicidades es un muy buen ejemplo.
Por otra parte me gustaría saber si puedes ayudarme a visualizar este control dentro de un WebPart, lo he intentado pero pues no me es sencillo hacerlo.

Saludos y espero puedas ayudarme
Comment posted by Gustavo Magaña Cárdenas, again on Sunday, July 29, 2012 6:01 PM
Hello friend, before anything else, happiness is a very good example. On the other hand I wonder if you can help me visualize this control in a WebPart, I tried but since I am not easy to do.  Greetings and I hope you can help
Comment posted by Priya on Saturday, August 11, 2012 2:46 AM
Hello Friend, I just wanted to know, will this method work when the silverlight application is deployed in the server?

thanks in advance...
Comment posted by Anna S on Monday, November 12, 2012 1:35 PM
Hi, thank you for a wonderful article. I have done this on my laptop, but now needs to deploy the code at my company's web server. Should I change the localhost:<port> to the web server's address? Besides the main html file and .xap, do I also need to copy the UploadFileHandler.ashx into the web server ? If yes, then I've done this, but somehow this doesn't work at the web server, i.e., the file doesn't get uploaded to where it should be. But this code's working on my laptop, though. Any clue?
Comment posted by Anna S on Monday, November 12, 2012 1:42 PM
Hi, thank you for a wonderful article. I have done this on my laptop, but now needs to deploy the code at my company's web server. Should I change the localhost:<port> to the web server's address? Besides the main html file and .xap, do I also need to copy the UploadFileHandler.ashx into the web server ? If yes, then I've done this, but somehow this doesn't work at the web server, i.e., the file doesn't get uploaded to where it should be. But this code's working on my laptop, though. Any clue?
Comment posted by Ajay Jangam on Sunday, March 9, 2014 6:39 AM
Please May i know whether this uploader will work on tablet(Android device)?
Comment posted by Waleed M. Raafat on Sunday, April 6, 2014 6:59 AM
Many thanks

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel