javascriptdropboxdropbox-apidropbox-sdk-js

Display images from dropbox with javascript api


I'm trying to create a page that could show all pictures in a dropbox folder through the Javascript API.

I was able to set up my dropbox app properly, and I am able to get a list of files.

I'm stuck at the part to get a URL I could actually use to show the picture in HTML. I tried the following code, to try and get the URL for 1 image for the time being:

dbx.filesListFolder({path: ""})
    .then(function(response) {
        console.log(response);
        // ↑ this works!
        dbx.filesGetThumbnail({path: response.entries[0].path_display, format: "jpeg", size: "w64h64"})
            .then(function(result) {
                window.data = result;
                console.log(result);
            })
        // closures and rest of code...

Inspecting the window.data or the console.log(result), I cannot seem to find any URL I could use in my HTML.

Any pointers to head me in the right direction? I'm still new to the Dropbox Javascript API.


Solution

  • Kudos to Greg

    The filesGetThumbnail method doesn't itself return a URL for the thumbnail data. It returns the raw thumbnail data directly. If you want a URL to display locally in the browser, you may want to something like this:

    dbx.filesGetThumbnail({"path": "/test.jpg"})
      .then(function(response) {
        var img = document.createElement('img');
        img.src=window.URL.createObjectURL(response.fileBlob);
        document.body.appendChild(img);
      })
      .catch(function(error) {
        console.log("got error:");
        console.log(error);
      });
    

    BTW, you can find all of the API v2 JavaScript SDK methods documented here.