[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.
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:
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):
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:
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.
Build with Dropbox today at www.dropbox.com/developers
*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.