I have client-side web apps (no server-side code) that use chooser and saver. I've had previous problems getting the bearer token in a consistent manner. Now, Chooser doesn't ever return a bearer token. Here's a simple script to pick and display an image using chooser.
var KLOUDLESS_APP_ID = " (my api key) ",
KLOUDLESS_CHOOSER = window.Kloudless.explorer({
app_id: KLOUDLESS_APP_ID,
retrieve_token: true
}),
picker = document.getElementById("pick");
picker.onclick = function () {
KLOUDLESS_CHOOSER.choose();
}
KLOUDLESS_CHOOSER.on("success", function (files) {
console.log("upload-kloudless", files);
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.kloudless.com/v0/accounts/" + files[0].account + "/files/" + files[0].id + "/contents", true);
xhr.setRequestHeader("Authorization", "Bearer " + files[0].bearer_token.key);
xhr.responseType = "arraybuffer";
xhr.onload = function(oEvent) {
if (xhr.status === 200) {
var blob = new Blob([this.response], {type: files[0].mime_type});
console.log("content", blob, blob.type, this.response, typeof this.response);
var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.response)));
var src = 'data:' + files[0].mime_type + ';base64,'+ base64String;
var img = document.createElement("img");
document.body.appendChild(img);
img.src = src;
var p = document.createElement("p");
p.textContent = files[0].name + " " + files[0].mime_type;
document.body.appendChild(p);
}
};
xhr.send();
});
var KLOUDLESS_APP_ID = " (my app key) ",
KLOUDLESS_APP_KEY = " (myy app secret) ",
KLOUDLESS_CHOOSER = window.Kloudless.explorer({
app_id: KLOUDLESS_APP_ID,
retrieve_token: true
}),
picker = document.getElementById("pick");
picker.onclick = function () {
KLOUDLESS_CHOOSER.choose();
}
KLOUDLESS_CHOOSER.on("success", function (files) {
console.log("upload-kloudless", files);
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.kloudless.com/v0/accounts/" + files[0].account + "/files/" + files[0].id + "/contents", true);
xhr.setRequestHeader("Authorization", "APIKey " + KLOUDLESS_APP_KEY);
xhr.responseType = "arraybuffer";
xhr.onload = function(oEvent) {
if (xhr.status === 200) {
var blob = new Blob([this.response], {type: files[0].mime_type});
console.log("content", blob, blob.type, this.response, typeof this.response);
var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(this.response)));
var src = 'data:' + files[0].mime_type + ';base64,'+ base64String;
var img = document.createElement("img");
document.body.appendChild(img);
img.src = src;
var p = document.createElement("p");
p.textContent = files[0].name + " " + files[0].mime_type;
document.body.appendChild(p);
}
};
xhr.send();
});
But doing so would mean exposing my secret key in my source code. Is there a solution to always guaranteeing a bearer_token will be returned?