0

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.

mesqueeb
  • 5,277
  • 5
  • 44
  • 77
  • [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

2 Answers2

2

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.

Community
  • 1
  • 1
mesqueeb
  • 5,277
  • 5
  • 44
  • 77
2

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

CuongDC
  • 634
  • 1
  • 7
  • 16