1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

JavaScriptでDropbox APIから画像を読み込む

Last updated at Posted at 2021-03-29

とりあえず動いた喜びと感動とメモ帳書きとして

<!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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?