Display images from dropbox with javascript api

Question

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.

[Cross-linking for reference: https://www.dropboxforum.com/t5/API-support/How-to-show-a-photo-using-Javascript-API/m-p/214076#M10930 ] — Greg, Mar 31 '17 at 14:23

score 2 · Accepted Answer · edited May 23 '17 at 12:17

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.

score 2 · Answer 2 · answered Sep 05 '19 at 07:02

For others has the same issue :) Now Dropbox JS Api returns base64 image data instead, so you need to do something like this:

  var img = document.createElement('img');
  img.src = "data:image/jpg;base64, " + <data returned>;

data:image/jpg depends on which image type you requested

Display images from dropbox with javascript api

2 Answers2