The Dropbox REST API allows applications to read/write data on the server using standard HTTP methods, I believe POST is used for writes. That means any of your standard "AJAX" calls can make that happen. In JavaScript, that's usually done with
XMLHttpRequest or jQuery's
$.ajax. I suggest the jQuery method, since it's a piece of cake:
Code:
$.ajax("https://api.dropbox.com/0/
[email protected]&password=MyPassword)
Of course, since you brought up 'security' ... you can see right there your email address and password will be in the cleartext JavaScript, and could be fished out of it easily. A more secure method is to ask the user for authentication credentials:
Code:
$.post("https://api.dropbox.com/0/token", {
email: encodeURI(email),
password: encodeURI(password)
})
This one uses
$.post, just to show another way of making the REST call. It does not increase security, since both methods are encrypted with HTTPS.
All you really need now is a callback to receive the response to verify that authentication was successful, and the token/secret from that response can be used for further requests, like using the
files call to upload a file.
Code:
var auth = {}
$.post("https://api.dropbox.com/0/token", {
email: encodeURI(email),
password: encodeURI(password)
}, function (data) {
auth = data
upload()
})
function upload() {
// Do magic here! `auth` is already configured; just pass its properties in the 'data' field to $.ajax() or $.post()
}
The "magic" mentioned in the comment is going to be a bit ugly, because you'll be encoding multipart/form-data HTTP headers for your POST. jQuery does not include any automagic encoding function. For recent browsers (Firefox 4, Chrome 5, Safari 5, ...) you can use some voodoo like the
FormData API to do all the heavy lifting for you! In the case that you need to support older browsers, get ready for some banging-your-head-against-the-wall action!
multipart/form-data RFC:
http://www.faqs.org/rfcs/rfc2388.htmlAn implementation, written in Python:
http://code.activestate.com/recipes/146 ... form-data/Once you have some encoded multipart/form-data crap, you can use $.ajax() to perform the actual call...
Code:
$.ajax("https://api-content.dropbox.com/0/files/dropbox/" + path, {
type: "POST",
data: formdata,
contentType: "multipart/form-data; boundary=" + boundary
}
Where
path is the path where the file will be uploaded, and
formdata is the actual data that is going to be written (multipart/form-data encoded) ... and
boundary is the MIME boundary (the Python code uses "----------ThIs_Is_tHe_bouNdaRY_$", but it can be anything, as long as it starts with LOTS OF HYPHENS. And the more obscure it is, the less chance it will have of causing false-positives when the server goes to scan for the data boundaries).
This biggest problem, by far, is that this will probably not work at all. To prevent XSRFs, browsers will not allow XMLHttpRequests to any domain that the JavaScript is not running on. That means your JS files must be served from both api.dropbox.com
and api-content.dropbox.com. Fat chance! Using JSONP is a workaround for GET requests. As for POST requests ... well, I guess you could drop a form (with method=POST and multipart/form-data) into an iframe and manipulate it that way.
Honestly, that's pretty gross. Dropbox could fix all of that in one fell swoop just by sending the "Access-Control-Allow-Origin: *" header with all requests.
Oh, and see also:
http://code.google.com/p/dropbox-js/
Login
FAQ
Search
