Using Dropbox in your .NET Application

Whenever you need a user to upload something to your application, you usually put a big shiny "Upload" button right in the center of your Web page. We've all been trained to do it -- input type=file and all that, just like in the 80s.

Fine.

Except that it's not the glorious 80s anymore, and most users keep their stuff in the cloud, where our beautiful Upload button can't reach them. You have to do better than that.

Time to Move On

This is why I decided to add Dropbox support for my online .NET IDE that I'm building. Naturally, if you want to edit your code online, you probably keeping it online somewhere. Dropbox was just the first really cool cloud storage, so I decided let's add support for Dropbox first.

Fortunately, there's a really cool .NET wrapper for it, so I just added a few things that made sense, and also created a graphic (that might be the very first post with a graphic on this blog), so that you get a clear picture of what's going on. The wrapper is called DropNet, you can get it from NuGet, and there's a brief how-to here. The only problem is that the main Client object should be somewhat "prepared" before it can be used -- namely, it should get an OK from both the end user to access her Dropbox folders, and from Dropbox itself. Having a human factor right in the middle of the process made it essentially non-automatable (in my own tests, I would put a breakpoint and perform the manual part, then continue running the test), and a little bit complicated to grasp. In addition, the DropNet wrapper doesn't "know" on which state of the process we are being currently. So [I heard you like wrappers, so] I wrapped this wrapper in my own wrapper, calling it DropNetWrapper, and published it (together with a couple of extension methods that let you download/upload a file/folder more easily) on GitHub, just to boost my ego a little bit.

It's kinda hard to explain all that dancing that should be done before you can actually use it, so I'm putting here the abovementioned picture (you may laugh, but I actually installed PowerPoint in order to draw it).

Here's the legend:

1. The main page calls the GetAuthorizeUrl method of the DropnetWrapper instance via AJAX.
2. The return value of this method is used to open a popup window which lets the user login to DropBox and authorize your app to manage her DropBox files.
3. After the user clicks the Allow button, the callback URL is opened in the same popup window. It’s a page from your site. It’s not supposed to display anything, just execute a script (see the next step).
4. The popup page informs the main page that the authorization was successful (or not) and closes itself.
5. The main page gets the DropNetClient instance from DropNetWrapper via its Client property. It is important that we use the same DropNetWrapper instance, so you might want to use a HttpSession lifestyle (or just keep it in your Session state).
6. The main (or any other) page uses the DropNetClient’s methods (or extensions via the  provided DropNetExtensions class) to manipulate the user files and do other interesting things.

Note that this is just one of the many possible ways of using it. For example, you might want to open the authorization page in the main window (actually it's quite big, so the main window might even be a better choice), which would simplify things a bit, although I'd hate to have the user leave my site.

Happy dropping!