You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.

Forum Discussion

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

 

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

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox Staff

    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

    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 Staff rankDropbox Staff

    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.

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

5,883 PostsLatest Activity: 16 hours ago
326 Following

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 or Facebook.

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!