New File and Folder Embedder Launched in Preview

[This component is currently in Preview and may be changed or upgraded at Dropbox’s discretion. Please consider leaving feedback.]

Wouldn’t it be convenient if your users could see their Dropbox content without leaving your app? You could build that functionality yourself using the Dropbox API, but why not use our new File and Folder Embedder and let us do the heavy lifting?

It’s a good time to be a Dropbox developer. In 2020, we’ll be releasing some new pre-built components to give your users new and interesting ways of interacting with their Dropbox content on your surface. If you leave us feedback while a component is in the Preview phase, then we’ll use it to help plan enhancements to the component.

In case you’re new to Dropbox’s embeddable components, they’re concise snippets of code that can be copied into your HTML. The components allow your users to access, organize, and manage their Dropbox files without having to leave your website or app. Up until now, Dropbox has offered two components: Chooser, which allows users to get files from a Dropbox account and Saver, which lets users save files into a Dropbox account.

Introducing the File and Folder Embedder

Adding robust Dropbox functionality to your app just got even easier. We’re excited to release a “Preview” version of the File and Folder Embedder, a new, pre-built component that allows your users to view and interact with their Dropbox files or folders from within your app.

While in the Preview phase, we’re actively adding new enhancements, controls, and supported filetypes to the Embedder. Your feedback is highly valuable to us at this time. Please consider leaving feedback on our developer forum or filling out a survey. For the folks that fill out the survey, you’ll be entered into a sweepstakes* for a $200 Amazon gift card we’re giving away in April.

The File and Folder Embedder uses a shared link and either an anchor tag (<a>) or JavaScript method (Dropbox.embed) to generate an interactive content embed inside an <iframe>. The component works with files or folders and has different features available for each type of content. New documentation for building with the Embedder is available here: https://www.dropbox.com/developers/embedder.

You or your users can get a Dropbox shared link to your content in a number of ways, including but not limited to:

  • The Dropbox API
  • Dropbox Chooser, another pre-built component similar to File and Folder Embedder
    • Tip: Chooser can be configured to select only specific file types
  • The Dropbox user interface like the web site, desktop app, or mobile apps

The content displayed by the Embedder depends on the shared link. If the shared link points to a folder, then the embed lists the content of the folder. However, if the shared link points to a file, then the embed is a preview of that file.

Embedding a File

At the time of release, the Embedder can generate view-only previews for the following types of files:

  • Multi-page docs (.pdf, .pptx, .docx, .ai)
  • Images (.jpg, .gif, .png, .psd)

A user can interact with the embedded files in the following ways:

  • View a file’s activity feed
  • Open the file on Dropbox

Here’s an example of what an embedded PDF file looks like:

Example of an embedded PDF file

Screenshot of embedded file

We used the Embedder to generate the preview above with the following code:  


<a 
  href="https://www.dropbox.com/sh/keptcjl08q3wsid/AABfOq8QCJY-fg2RgpwdsrGLa/Getting_Started_with_Dropbox_Paper.pdf?dl=0"
  class="dropbox-embed"
  data-height="500px"
></a>

You could also use the Dropbox.embed() method (especially helpful if you’re embedding the content dynamically):

Dropbox.embed({link:"https://www.dropbox.com/sh/keptcjl08q3wsid/AABfOq8QCJY-fg2RgpwdsrGLa/Getting_Started_with_Dropbox_Paper.pdf?dl=0"}, embedContainer) 

You can learn to embed files by using the Embedder documentation.

Embedding a Folder

At the time of release, the Embedder can generate a preview of a folder that displays the folder’s contents. 

Users can interact with folders by:

  • Toggling between grid and list view
  • Opening files in Dropbox
  • Copying shared links to the folder or individual files

Here’s an example of what an embedded folder looks like:

Example of an embedded Dropbox folder

Screenshot of embedded folder

We used the Embedder’s JavaScript method to create the folder embed dynamically:

Dropbox.embed({link:"https://www.dropbox.com/sh/keptcjl08q3wsid/AACui966iXcXPbagCJ2py2L-a?dl=0"}, embedContainer) 

You can also use an anchor tag () to embed the folder:

<a 
  href="https://www.dropbox.com/sh/keptcjl08q3wsid/AACui966iXcXPbagCJ2py2L-a?dl=0"
  class="dropbox-embed"
></a>

You can learn to embed folders by using the Embedder documentation.

Feedback and Feature Requests

Can you help us improve the Embedder? While the File and Folder Embedder is in the Preview phase, we’re actively working to enhance the capabilities and supported file types to make the component more valuable for your users. Any feedback you provide us will be highly leveraged as we build enhancements. You can leave your feedback on this post in our developer forum. Alternatively, if you fill out this survey, then we’ll enter you into a sweepstakes* for a $200 Amazon gift card that we’re giving away in April.

Don’t hesitate to reach out to us if you need help! You can use the support request form, post on our developer forum, or @ us on Twitter.

Build with Dropbox today at www.dropbox.com/developers

Legal Disclaimer

Navigating to the survey in the article will direct you to our Qualtrics survey website. All information you enter will be treated in accordance with the Dropbox Privacy Policy. Dropbox will never ask you for your password or billing information via invitations to surveys or in surveys themselves.

*NO PURCHASE NECESSARY. VOID WHERE PROHIBITED BY LAW. Ends April 30, 2020 at 9:00pm Pacific Time. Must be 18+, have reached the age of majority in state of residence, and be a legal resident of the U.S. Sponsor: Dropbox, Inc. Odds of winning depend on the number of entries received.  Click here for complete rules.

Source: Dropbox