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

[helloworld123]

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 solution]

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.