/ OneDrive

Creating a OneDrive Web App - Drop event

So, we have the code to login, get some tokens and refresh the tokens.
Now we need some client side logic to be able to take some files (that the user selects) and transfer them over to OneDrive.
Luckily for me, this can be done rather clean nowadays with a little help from HTML5 and the FileAPI.
HTML5 logo

Selecting files - FileAPI

The file API allows us to do some neat things. For example, we can register an element's drop handle to handle files.
Div targeted for drop element
In that way, a user can simply drag and drop files to specific parts on the website to give the site 'permission' to use it. Handy indeed.

How does this look? It's faily simple, a few javascript registrations and we can hook up some functions to both detect when a file is dropped, dragged over or out of our element.
We register all three so that we can give visual queues to the user.

//Set up the file drop listeners:    
document.getElementById('fileDropBox').addEventListener('drop', handleFileSelection, false);

I like visual queues...

//Set up the handlers for the visual queues
document.getElementById('fileDropBox').addEventListener('dragover', handleDragOver, false);
document.getElementById('fileDropBox').addEventListener('dragleave', handleDragLeave, false);

Right, we were talking client logic!

Sending files - XMLHttpRequest

I don't really want to introduce more new dependencies to my little project, I'm keeping this one 'pure'.
That means, no jQuery, no bootstrap... (for now)

So, I needed a way to send some file (also known as data) across the web in a AJAXy-way. Luckily there's the little thing known as XMLHttpRequest that can help me with just that, I simply create a form and send it of. Simple, efffective, and makes me wonder why I use jQuery.

//Create the FormData to send
var fd = new FormData();

//Put all the files in our FormData
for(var f in allFiles) {
    fd.append('file' + f, allFiles[f]);
}

var xhr = new XMLHttpRequest();

//Choose how we send and to where
xhr.open("POST", "upload");

//Send the stuff to the server
xhr.send(fd);

(this is without event listeners and error handling)

Okey, I remember now it doesn't really works on all browsers... But for this thing, I'll settle with 88% if they get a pleasent experience.
Image illustrating how many % of internet users can use XMLHttpRequest
If I did this for someone or for a more serious project, I would have added some fallbacks and friendly messages. Might add that later, but not now.

Currently, I'm happy with this solution and it's some pretty dependency free code :)

Coming up

Next post will be about the server side of things. When I recieve these files, how do I pass them on to the OneDrive service? There's one slight problem with that... To upload a file I need to know where it should be uploaded to... So maybe I'll start with creating the folder picker! Yepp, sounds more logical, folder picker it is!

I'm working on a new project involving Kinect and presentations... More stuff is hopefully coming up soon!