cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Are you interested in learning how media industry leaders use Dropbox Replay? Register for our webinar here.

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

API v2: Simple image gallery on my website using dropbox

API v2: Simple image gallery on my website using dropbox

Mathias W.3
New member | Level 2
Go to solution

Hey everybody,

is there a simple way to list all files of a folder with thumbnails on my website with php? I'd like to upload / manage the photos or files through dropbox and want to output them on my site.

I already got it work to list all files and metadata using API v2 and cURL via https://api.dropboxapi.com/2/files/list_folder.

But when trying to retrieve the thumbnails via https://content.dropboxapi.com/2/files/get_thumbnail I get only cryptic output, not the thumbnail. 

Unfortunately I can't use any of the SDK's.

Can somebody help me to get this work?

Thanks,
Matthew.

1 Accepted Solution

Accepted Solutions

Greg-DB
Dropbox Staff
Go to solution

Apologies, I wasn't clear before. Even if you don't specify the format, the returned data is already the jpeg data for the thumbnail for the file. In either case though, that is, for png or jpeg thumbnails, the thumbnail data will be returned directly in the response of the API call as binary data.

It sounds like you want to display these thumbnails directly in an img tag, in which case you will need to base64 encode it for a data URI as you showed, or save it to your server and serve it from a URL you can use in the img src.

I'm not sure what the issue may be when you say that when you "display the image in a modal box the image opens in a new window". That sounds like it may be outside the scope of the Dropbox API itself though, since the API call already succeeded and returned the thumbnail data at that point.

Perhaps you'd prefer an API endpoint that returns thumbnail links, instead of thumbnail data? I'll send that along as a feature request too.

View solution in original post

8 Replies 8

Greg-DB
Dropbox Staff
Go to solution

HI Matthew, the endpoints you mentioned are the right ways to list files and get thumbnails, respectively.

Can you elaborate on what you mean when you say you "get only cryptic output"? If the endpoint replies with a successful status code (200), the body will be the raw data for the thumbnail directly. You can then use that however you'd like.

Mathias W.3
New member | Level 2
Go to solution

Hey Gregory,

thanks for reply.

Ah, I see. Yes, I meant the raw data. Is it possible to get the thumbnails as jpg's instead of the raw data? And: how can I speed up the transmission between dropbox and my site? Right now I have only 10 images in the folder and my console says it took 17 seconds to download the thumbnails. If I upload, let's say 100 pictures, it may take forever to load the content. 

Matthew.

Greg-DB
Dropbox Staff
Go to solution

By default, the thumbnail data returned by /2/files/get_thumbnail is jpeg. (You can choose between jpg and png using the "format" parameter.)

And no, unfortunately we don't have any sort of batch thumbnail call, but I'll be sure to pass this along as a feature request. 

Mathias W.3
New member | Level 2
Go to solution

Thanks for the info. Batch thumbnail call would be nice in future. 🙂

I tried your suggestion and chose "jpeg" instead of leave it empty. But I still getting only raw data.

For explanation: I wrote a script in php where I used your suggested curl code in API v2 explorer. After getting the data from dropbox I have to use "base64_encode" and add the generated code in my image tag via src="data:image/jpg;charset=utf8;base64,code goes here". It works, but when I try to display the image in a modal box the image opens in a new window. I think it's because of the src-tag I'm using also as href-tag.

So I hoped I could get the image in jpg-format (e.g. test.jpg), that would be much easier and the modal box would also work.;) 

 

Greg-DB
Dropbox Staff
Go to solution

Apologies, I wasn't clear before. Even if you don't specify the format, the returned data is already the jpeg data for the thumbnail for the file. In either case though, that is, for png or jpeg thumbnails, the thumbnail data will be returned directly in the response of the API call as binary data.

It sounds like you want to display these thumbnails directly in an img tag, in which case you will need to base64 encode it for a data URI as you showed, or save it to your server and serve it from a URL you can use in the img src.

I'm not sure what the issue may be when you say that when you "display the image in a modal box the image opens in a new window". That sounds like it may be outside the scope of the Dropbox API itself though, since the API call already succeeded and returned the thumbnail data at that point.

Perhaps you'd prefer an API endpoint that returns thumbnail links, instead of thumbnail data? I'll send that along as a feature request too.

Mathias W.3
New member | Level 2
Go to solution

You're right. The API works correctly. Now I even understand how it works. 🙂 

The modal-window-problem is not really a matter of dropbox, but I hoped you still got a hint for me. I thought it is maybe an issue because of the base64 encoding in the img tag. I'll search somewhere else for a solution. 😉

 

Thanks for your help and explanation.

 

Matthew.

rodrigolinkweb
New member | Level 2
Go to solution

Hello Mathias, are you brazilian?

Can you please help me with this question?

Greg-DB
Dropbox Staff
Go to solution
The Dropbox API now offers the ability to get thumbnails in batches:

https://www.dropbox.com/developers/documentation/http/documentation#files-get_thumbnail_batch
Need more support?
Who's talking

Top contributors to this post

  • User avatar
    Greg-DB Dropbox Staff
  • User avatar
    rodrigolinkweb New member | Level 2
  • User avatar
    Mathias W.3 New member | Level 2
What do Dropbox user levels mean?