Child Item

preview my files in iframe using http core api

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

Find more posts tagged with

API

Abuse

Comments

Greg-DB

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.

Federico P.3

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

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

Greg-DB

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.

Steve M.

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.