Forum Discussion

cloudlife's avatar
cloudlife
Helpful | Level 6
9 years ago
Solved

How do I display the image data from the /2/files/download endpoint?

So I'm authorizing it properly, providing the correct headers in the proper format, retriving the response headers, and the data. But I can't seem to figure out how to display the information that comes out, it just comes out as a huge chunk of this:

$.ajax(.........success: (data, textStatus, request) //data below

 �)��yJq��i�Lj�q`���K���8��ccx����R�I�̼��������)|�x:qC�2 �z�F�H;� 

 

Now clearly this is the data itself, but it doesn't work when I drop it into the src attritbute directly like this (using react): <img src={data} />

 

I've spent a few hours trying to figure out how to get this to work, trying multiple solutions without success, and I'm sure it's something simple. Any help would be greatly appreciated!

  • The /download call returns the raw binary data for the file. If it's an image and you won't to display it in an image tag, you'll need to either save it somewhere where you can serve it from a URL, or encode and format it as a base64 data URI, or perhaps using some of the newer blob/file functionality in modern browsers.

2 Replies

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Community Moderator rankDropbox Community Moderator
    9 years ago
    The /download call returns the raw binary data for the file. If it's an image and you won't to display it in an image tag, you'll need to either save it somewhere where you can serve it from a URL, or encode and format it as a base64 data URI, or perhaps using some of the newer blob/file functionality in modern browsers.
  • cloudlife's avatar
    cloudlife
    Helpful | Level 6
    9 years ago
    Thanks! That's really what I needed was what kind of data it was, and what kind of solutions there were.

    I had already seen a possible solution using blobs, but the solution required that I send a response header for blob which potentially along with other things didn't end up working.

    The simple solution is: go install whatwg-fetch and use that for your api calls and when you get the response run:
    URL.createObjectURL( response.blob() )
    and set that result as the image src attribute.

    Thanks again!

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.

The Dropbox Community team is active from Monday to Friday. We try to respond to you as soon as we can, usually within 2 hours.

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, Facebook or Instagram.

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!