Integrating the Uploader Control with an Existing Website

The example code provided with this project consists of three main pieces:
  1. The Silverlight control, SilverlightFileUploader.xap
  2. An ASP.NET server control, UploaderControl.cs, which facilitates placing the Silverlight control onto the page
  3. An http handler for receiving uploaded files, UploaderControlHandler.cs

This guide will show you how to add these pieces to your existing ASP.NET website either as binaries, or as part of your source code solution.

Add the Silverlight Control

Adding a Silverlight control to your website is easy:
  1. open the example solution provided, and build it.
  2. In the SilverlightFileUploader.Web project, you will see a file called SilverlightFileUploader.xap in the ClientBin folder. Copy this file into a ClientBin folder at the root of your own web project or website.

note: The .xap file can technically go anywhere in your website, it does not need to be at ~/ClientBin. This guide recommends that you place it in this location though, because the provided UploaderControl used in the next step will reference this location by default. If you wish to place it elsewhere, you can specify the XapPath property on the UploaderControl.

If you want to integrate the source code for the Silverlight control into your own solution for development, do the following:

Prerequisite: it is assumed that you have an existing ASP.NET Web Application project to which you are trying to add the Silverlight control.
  1. Add the provided SilverlightFileUploader.csproj to your solution.
  2. Right-click on your web application project in the solution explorer, and choose Properties.
  3. On the properties page, go to the Silverlight Applications tab.
  4. Click the Add... button.
  5. Choose "Use an existing Silverlight project in the solution:", and choose SilverlightFileUploader from the drop-down list.
  6. In the link options, leave the Destination folder as ClientBin. You may uncheck "Add a test page that references this control" if you do not need a separate testing page -- it doesn't hurt to leave it checked though, as you can always delete the test page later.

Add the Server Control

To add the provided server control to your existing project:
  1. Open the example solution, and build it.
  2. Locate Vci.FileUploader.dll in the Vci.FileUploader/bin folder (or /bin/Debug), and copy this into the bin folder of your web application project or website.
  3. If you are using a web application project, you will want to add the DLL file to your project: right-click on your web application in the solution explorer, and choose Add -> Existing Item... . Browse to bin/Vci.FileUploader.dll and select it. This makes the DLL part of your project file definition.
  4. Add a reference to the DLL in your web application project or website: right-click on References in the solution explorer, go to the Browse tab, and locate the Vci.FileUploader.dll file in your bin folder.
  5. Add the provided javascript file "uploadercontrol.js" to your web project. You may configure the location of the javascript file by setting the ScriptPath property on the UploaderControl. By default, UploaderControl will look for the javascript file in a folder called "scripts" at the root level of your website.

That's it! See TestPage.aspx for an example of how to place the UploaderControl onto one of your pages.

If you would like to add the source code to an existing solution, do the following:
  1. Add Vci.FileUploader.csproj to your solution.
  2. Add a reference to the Vci.FileUploader project in your web application project or website.

Configure the HTTP Handler

You must first add Vci.FileUploader.dll to your web project as described above. It contains the code for the example http handler.

Then, you must modify your web.config file to set up the mapping for the http handler. Add the following two <add> elements to the list of <httpHandlers> and <handlers>. (There are other pre-defined ones, but I have omitted them from this example code.)

      <add verb="*" path="UploaderControlHandler.ashx"

      <add name="UploaderControlHandler.ashx_*" 
          path="UploaderControlHandler.ashx" verb="*"

If you follow this guide, UploaderControl will point to this http handler by default. If you wish to change the path to the http handler for some reason, or use your own completely custom http handler, specify the HandlerPath property on UploaderControl to provide the path to your handler.

That's it! The example code should be ready to use within your own application. See Example Usage for more details on using the provided code.

Last edited Jun 22, 2009 at 10:21 AM by pcoley, version 5


ejalbert Apr 8, 2012 at 3:55 PM 
I tried to integrate this in MVC application, but had no success trying all the modifications here.

I remembered that MVC application registers its own routes for mapping pages to controllers, so Here is the solution:

you have to specify the uploaderControlHandler to be ignored in the Global.asax, so the function RegisterRoutes should look like this
public static void RegisterRoutes(RouteCollection routes)
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults


stanmerrill Jan 30, 2011 at 3:22 AM 
This detailed description of how to integrate this with my application was extremely helpful!!!! I have tried another codeplex tool that would work in it's environment and I spent 3 days and couldn't integrate. These instructions were extremely precise and detailed. Thanks!!!!!!!