API v2: Simple image gallery on my website using dropbox

[Mathias W.3]

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.

[Greg-DB]

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]

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]

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]

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 · Accepted 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]

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]

Hello Mathias, are you brazilian?

Can you please help me with this question?

[Greg-DB]

The Dropbox API now offers the ability to get thumbnails in batches:

https://www.dropbox.com/developers/documentation/http/documentation#files-get_thumbnail_batch