For the moment, the dropbox API allows a browser to access (read/write) all type of files in a dropbox folder on your local drive by script. The file path and name can be specified in the script. The script works on webpages that are stored on a local drive, but also works on webpages that are stored on a remote site when using Chrome.
Please see these jsfiddles with a primitive implementation to test writing and reading a text file in a local dropbox folder. The scripts are written in pure vanilla javascript code, and no not need a library. Only a one-time access token is needed and no further authentication procedure.
This jsfiddle (click) demonstrates: Write text file to local dropbox folder
function WriteFile() {
var H = new Array(6);
H[0] = "Authorization";
H[1] = document.getElementById("bear").value;
H[2] = "Content-type";
H[3] = "application/octet-stream";
H[4] = "Dropbox-API-Arg";
H[5] = '{"path": "/' + document.getElementById("pana").value;
H[5] = H[5] + '","mode":{".tag":"overwrite"}}';
var X = new XMLHttpRequest();
X.onreadystatechange = acb;
X.open("POST", "https://content.dropboxapi.com/2/files/upload", true);
X.setRequestHeader(H[0], H[1]);
X.setRequestHeader(H[2], H[3]);
X.setRequestHeader(H[4], H[5]);
X.send(document.getElementById("myText").value);
document.getElementById("demo").innerHTML = "writing . . .";
}
function acb(A) {
var X = A.target;
var G = X.readyState;
if (G != 4) {
return 0;
}
document.getElementById("demo").innerHTML = "status: " + X.status;
}
This jsfiddle (click) demonstrates: Read text file from local dropbox folder
function ReadFile() {
document.getElementById("text").value = "";
var H = new Array(6);
H[0] = "User-Agent";
H[1] = "api-explorer-client";
H[2] = "Authorization";
H[3] = document.getElementById("bear").value;
H[4] = "Content-type";
H[5] = "application/json";
var X = new XMLHttpRequest();
X.onreadystatechange = acb;
X.open("POST", "https://api.dropboxapi.com/2/sharing/create_shared_link", true);
X.setRequestHeader(H[0], H[1]);
X.setRequestHeader(H[2], H[3]);
X.setRequestHeader(H[4], H[5]);
X.send('{"path": "/' + document.getElementById("pana").value + '"}');
document.getElementById("stat").innerHTML = "Reading . . .";
}
// async call back 1
function acb(A) {
var X = A.target;
if (X.readyState != 4) {
return 0; // when ready
}
var stat = X.status;
document.getElementById("stat").innerHTML = "status: " + stat;
if (stat != 200) {
document.getElementById("text").value = "NOT FOUND";
return 0; // error
}
var B = X.responseText;
var C = JSON.parse(B);
var D = C.url;
var E = D.split(".com");
var F = E[1];
var G = "https://dl.dropboxusercontent.com" + F;
document.getElementById("text").value = G;
X = new XMLHttpRequest();
X.onreadystatechange = acb2;
X.open("GET", G, true);
X.send(null);
}
// async callback 2
function acb2(A) {
var X = A.target;
if (X.readyState != 4) {
return 0; // when ready
}
var stat = X.status;
if (stat != 200) {
document.getElementById("text").value = "Can't Read the file";
return 0; // error
}
var B = X.responseText;
document.getElementById("text").value = B;
}
I tried to obtain the same functionality for files in a "google drive" on a local drive , using the "google drive API", but without success. Can someone achieve this, eventually using other cloud storage systems.