Creating a Drag-and-Drop Upload Web Part for SharePoint Foundation 2010

Today I was working on a web part for SharePoint that would allow the user to either select files using an OpenFileDialog or via Silverlight 4’s drag-and-drop support. I came across a pretty serious issue once I completed my XAP file and uploaded it to my library. Drag-and-drop support was not available in SharePoint! When I would drag a file to the surface of the Silverlight web part and drop it, the browser would try to open the file. There is a pretty easy fix for this but I had to search all over the Interwebs to find the complete solution. Here is what you can do as well as an example of the code.

1. Create your web part.

     a. Use an ObservableCollection to bind to your list box to display files that will be uploaded. This allows the ListBox to be automatically notified when items are added or removed.

     b. Wrap your ListBox in a ListBoxDragDrop Target from the Silverlight ToolKit. This allows for items to be removed from the ListBox (and the ObservableCollection) by a drag-and-drop action.

     c. Write functionality that detects the drop of an item on the VisualRoot. I also like to include some sort of feedback like a ripple effect to show the item was added.

     d. Write functionality to upload the items to SharePoint. You might use a WCF Service or the Client Object Model.

2. The issue with drag-and-drop functionality is occurring because the OOB SharePoint 2010 web part has the option “WindowlessMode” set to true by default. You will need to create a version of the OOB web part that has this option set to false.

     a. Configure the web part to be exportable by selecting “Edit Web Part” and expanding advanced. You will see the Export Mode option.

     b. Set Export Mode to export all data and save your change.

     c. You will now see the export option on the drop down.

     d. Export the file and save it as SilverlightWindowlessMode.webpart

     e. Open the file in Notepad and change the WindowlessMode node to False. Or you can copy and paste the code example to Notepad and save it as SilverlightWindowlessMode.webpart. I would also change the Description and Title nodes.

     f. Now you must go to the Web Part gallery which is located at: http://sharepointservername/_catalogs/wp/Forms/AllItems.aspx

     g. Click the Documents tab and select Upload Document and choose your webpart file.

<webparts>
  <webpart xmlns="http://schemas.microsoft.com/WebPart/v3">
    <metadata>
      <type name="Microsoft.SharePoint.WebPartPages.SilverlightWebPart, Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" />
      <importerrormessage>Cannot import this Web Part.</importErrorMessage>
    </metaData>
    <data>
      <properties>
        <property name="HelpUrl" type="string" />
        <property name="AllowClose" type="bool">True</property>
        <property name="ExportMode" type="exportmode">All</property>
        <property name="Hidden" type="bool">False</property>
        <property name="AllowEdit" type="bool">True</property>
        <property name="Direction" type="direction">NotSet</property>
        <property name="TitleIconImageUrl" type="string" />
        <property name="AllowConnect" type="bool">True</property>
        <property name="HelpMode" type="helpmode">Modal</property>
        <property name="CustomProperties" type="string" null="true" />
        <property name="AllowHide" type="bool">True</property>
        <property name="Description" type="string">A web part to display a Silverlight application in Windowless mode.</property>
        <property name="CatalogIconImageUrl" type="string" />
        <property name="MinRuntimeVersion" type="string" null="true" />
        <property name="ApplicationXml" type="string" />
        <property name="AllowMinimize" type="bool">True</property>
        <property name="AllowZoneChange" type="bool">True</property>
        <property name="CustomInitParameters" type="string" null="true" />
        <property name="Height" type="unit">300px</property>
        <property name="ChromeType" type="chrometype">Default</property>
        <property name="Width" type="unit">400px</property>
        <property name="Title" type="string">Silverlight Windowless Web Part</property>
        <property name="ChromeState" type="chromestate">Normal</property>
        <property name="TitleUrl" type="string" />
        <property name="Url" type="string"></property>
        <property name="WindowlessMode" type="bool">False</property>
      </properties>
    </data>
  </webPart>
</webParts>