とりあえず動いた喜びと感動とメモ帳書きとして
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Dropbox Test</title>
<script src="https://unpkg.com/dropbox/dist/Dropbox-sdk.min.js"></script>
</head>
<body>
<h1>Dropbox Test</h1>
<script>
let accessToken = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
let dbx = new Dropbox.Dropbox({accessToken: accessToken});
let dir_path = "/Photos"
dbx.filesListFolder({path: dir_path})
.then(function (response) {
imageLoad(response);
})
.catch(function (error) {
console.error("error " + error);
});
function imageLoad(json)
{
let n = json.result.entries.length;
for(let i = 0;i<n;i++)
{
let fileData = json.result.entries[i];
dbx.filesGetTemporaryLink({"path": fileData.path_lower})
.then(function(response) {
let img = document.createElement('img');
img.src = response.result.link;
document.body.appendChild(img);
})
.catch(function(error) {
console.log("got error:");
console.log(error);
});
}
}
</script>
</body>
</html>
サムネールは画像をBlobで受けとるapiがありますが、
直接画像を取るには、json内のリンクを取るしかないっぽい。
参考
知識ゼロだけど、Dropbox APIを使用したい
https://qiita.com/Ella_Engelhardt/items/c33f08b6b427eab8b310
dropbox-sdk-jsを使ってフォルダ内アイテムの共有リンクを取得
https://kittagon.hateblo.jp/entry/2018/08/13/000916