How can I read files from Dropbox to display on my React webpage?

Question

Hello,

I was able to connect to Dropbox and make a call dropbox.files_list_folder(path="") to fetch information about files I have uploaded to my storage.

However, I just can't find a way to display the image to my webpage... I tried using 'path_display' field to try to get it done but it doesn't seem like this will let me pass even when i am using a token correctly.

Is this possible? I came across a post on Reddit that Dropbox doesn't support this but only allows reading info/metadata and uploading to Dropbox...

Is that true?

kylea · Accepted Answer

The path_display attribute returned in file metadata shows a path to the content within the user's Dropbox; it is not browser accessible URL.

The Dropbox API has files/download & files/get_thumbnail_v2 calls that will enable you to retrieve binary content for use in your application - but you'll need to manage making that content accessible to the browser.  files/get_temporary_link will enable you to request a URL for reading content, but note that this link is not to be used for directly displaying content in the browser.  All of these calls require the files.content.read scope; you may prompt the user to access file content.

The recommended - and easiest - ways to embed Dropbox content on a web page so a user may preview it is with the Embedder. The component allows a user to interact with Dropbox content within an iframe on your page.