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