cancel
Showing results for 
Search instead for 
Did you mean: 
Announcements
Update: Find information on Dropbox support during COVID-19 here
Close
cancel
Showing results for 
Search instead for 
Did you mean: 

preview my files in iframe using http core api

Federico P.3 New member | Level 1
New member | Level 1

Hi,

i am developing an application that let user browse his file inside my web application.

I'd like to let user preview his file inside an iframe of such webapp as such as it is done in dropbox webapp when clicking on file itself.

I have tryed using https://www.dropbox.com/developers-v1/core/docs#thumbnails and https://www.dropbox.com/developers-v1/core/docs#previews, but i see a binary object is returned in my ajax call, but i do not understand how to use such data.

Is there a "best practice" to achieve such result?

Thanks everybody

 

4 Replies 4

Re: preview my files in iframe using http core api

Dropboxer
Dropboxer

The thumbnails and previews endpoints return the raw data for the thumbnail or preview of the requested file, respectively. You'd need to save that data and serve it back however you want. E.g., serve it at a URL to use as the src for your iframe.

Re: preview my files in iframe using http core api

Federico P.3 New member | Level 1
New member | Level 1

Hi Gregory,

thank you for your reply. I have tryed (with thumbnail endpoint) to put raw data as src of my iframe with no luck (got an ampty iframe). I can see, in the first part of binary data, a JFIF string so i think this data is realyy a JPEG.

I wrote something like

<iframe src="data:image/*;base64,{{Raw Binary Data}}"/></iframe>

with no luck.

Also i would like to understand if binary data returned from preview endpoint would be correctly rendered inside a normal browser (i am thinking at word documents).

Thanks

Re: preview my files in iframe using http core api

Dropboxer
Dropboxer

I don't believe iframes support data: URIs as src, so you'd have to host the data at a URL like I mentioned in my last reply.

As far as browser support for different file types are concerned, that would depend on the specific file type and browser capabilities, unrelated to Dropbox itself. For example, I don't believe most browsers can natively display word documents, and would instead offer to download the file.

Re: preview my files in iframe using http core api

Dropboxer
Dropboxer

A bit of extra detail:

The documentation for /thumbnails is here: https://www.dropbox.com/developers-v1/core/docs#thumbnails. The default format returned is JPEG, but you can also ask for a PNG.

The documentation for /previews is here: https://www.dropbox.com/developers-v1/core/docs#previews. That endpoint always returns HTML or PDF (depending on the type of the original file). So although the browser won't be able to display a Word doc directly, it should be able to display the preview of a Word doc, because that preview will be either HTML or PDF.

Your attempt to use a data URI will likely work if you use an img tag (not sure if an iframe will work) and actually convert the data to base64. If you can't get that working, please share your code so people can help.

Work Smarter with Dropbox

The way we work is changing. Share and discover new ways to work smarter with Dropbox in our community.

Sound good? Let's get started.
Who's talking

Top contributors to this post

What do Dropbox user levels mean?
Need more support?