You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.

Forum Discussion

Mathias W.3's avatar
Mathias W.3
New member | Level 2
9 years ago

API v2: Simple image gallery on my website using dropbox

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.

  • 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.

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox Staff

    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's avatar
      Mathias W.3
      New member | Level 2

      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's avatar
        rodrigolinkweb
        New member | Level 2

        Hello Mathias, are you brazilian?

        Can you please help me with this question?

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox Staff

    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's avatar
    Mathias W.3
    New member | Level 2

    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's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox Staff

    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's avatar
    Mathias W.3
    New member | Level 2

    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.;) 

     

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

5,910 PostsLatest Activity: 3 days ago
333 Following

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!