Forum Discussion

Federico P.3's avatar
Federico P.3
New member | Level 1
11 years ago

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

 

4 Replies

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Community Moderator rankDropbox Community Moderator
    11 years ago

    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's avatar
    Federico P.3
    New member | Level 1
    11 years ago

    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

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Community Moderator rankDropbox Community Moderator
    11 years ago

    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.

  • 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.

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.

The Dropbox Community team is active from Monday to Friday. We try to respond to you as soon as we can, usually within 2 hours.

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X, Facebook or Instagram.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!