SharePoint Blog

SharePoint 2010 Drag and Drop Ribbon Control

When I first saw SharePoint 2013 on a Microsoft Roadshow presentation I was really delighted seeing that in the newest version it was possible to simply (drag and) drop files in a library. I couldn’t help but think that this is one of the most desired features of all. Still, it was already possible in SharePoint 2010 where you can choose to upload multiple files. Alternatively you can simply open the library in Windows Explorer. But it all just seems miles … hm, well actually a couple of clicks away. And for every extra click with the mouse, you’ll simply loose a couple of user kudo’s.

Thinking this over again, I was wondering whether it would be possible to simply add a drop zone to the ribbon. That for sure would save a few clicks. Whilst googling for inspiration, it seemed to me that Silverlight offers out-of-the-box certain panels that allow users to drop files on. And of course the SharePoint Client Object Model supports Silverlight. Having a couple of hours of time available and virtually no Silverlight programming experience under my belt I decided to give it a go. At the very last, it would add to my programming expierence!

If you don’t bother too much about the technical details, then feel free and download your copy of the Sandbox SharePoint Package (LINK) and take it for a test drive. However, be careful. This is a Just for Fun solution. It’s not properly tested and the code hasn’t been optimized or cleaned up. In other words, it’s not supported (even though I would like to here your feedback).

1. Log on as Site Collection Administrator, navigate to Site Actions > Site Settings > Solutions and upload and activate the User Solution DragAndDropFiles.wsp

Upload and Activate WSP

2. Continue as Site Collection Administrator, navigate to Site Actions > Site Settings > Site Features and activate the new feature Drag and Drop Files for SharePoint Libraries

Activate Drag and Drop Files for SharePoint Libraries

3. You can verify whether the activation was succesful by checking the Style Library (= prerequiste) in your current web (remember, it’s a site feature) where you’ll now find three new files (DragAndDropFilesControl.xap, jquery-1.8.0.min.js, UpdateRibbonButton.js)

Style Library

4. Now navigate to a library in the site on which you just activated the site feature and activate the new Drag and Drop Ribbon Tab that is now visible (you may need to wait a few seconds before the drop zone is loaded)

Drag and Drop Ribbon Control

5. Resize the browser so you can see your desktop and drag a file onto the grey drop zone and wait until a JavaScript prompt instructs to reload the library to see the uploaded file in SharePoint (this clearly is not how the final product should work, but it’s enough to showcase my intention)

What now follows are the some more technical details. But first let me point to two site that really helped me understand the nitty gritty details of how to develop a Silverlight 4 Drag and Drop surface (LINK) and how to create your custom ribbon tab with a Silverlight control on it (LINK).

To accomplish my goal, I’ve created a solution with two separate projects. The first project is based on an empty SharePoint template whilst the second project is a Silverlight project.

VS2010 Project Structure

The DragAndDropFilesControl project will produce the Silverlight XAP file that is referenced by the SharePoint project as follows.

Including Silverlight XAP file in SharePoint project

Rather then explaining everything in the last detail, I conclude by summing up some of the difficulties I experienced. Actually, there’s only one really challenge. A Silverlight control is parameterized. You need to tell it where it can find its source and you need to tell it where it can find the SharePoint Client Object Model. However, since I decided to develop the solution as a Sandbox solution I had to first query the Client Object Model to get the site and web urls, then construct the object’s HTML and inject it into the page. The effect is, that it isn’t running as smooth as you may wish for and it feels like you’re just hacking you’re way through. However, since the ribbon is primarily manipulated on the client side anyway, I don’t see much room for improvement. Of course you could move the Silverlight drop zone out of the ribbon.

I understand that some of you may want to have a look at the code. However, since I haven’t found the time to clean up, I won’t publish it (yet). But feel free to send me your request and I may send it to you directly.

Copyright ©2012. All Rights Reserved.