how to embed dropbox into a website so people can upload

• Documentation
• Guides
• Community & support
• App console

Using the Embedder

The Embedder allows you lot to embed interactive previews of Dropbox files or folders inside an <iframe>. Dropbox shared links are used every bit the data source for the embedded content. The embedded content respects the permissions and settings of the underlying shared link. Shared links are publicly accessible past default, just have settings to restrict access, such as to team members only.

The Embedder is a pre-built component; a small, built-by-Dropbox JavaScript library that allows your users to view and interact with Dropbox files and folders. By copying a snippet into their HTML, developers can generate embedded previews of Dropbox content.

Note that considering embeds are based on shared links, the embedded content tin exist taken down if it exceeds the limits outlined in this help center article.

Setting up the Embedder

The showtime pace to adding the Embedder is creating a Dropbox app. Using the embed component does not require production approval for your app. You lot can publish your integration to your users equally soon as you lot're ready.

In order to add together the Embedder component to your app, y'all'll demand to provide the domain names where your app is hosted. This lets us stop others from trying to impersonate your app. You can whitelist your domain in your Dropbox app's settings in the App Console. Yous can whitelist localhost if you lot're developing locally:

One time you've created an app, use the pull-down menu below to select your Dropbox app and your app central will automatically be added to the sample code. Copy the JavaScript snippet to your HTML and you're prepare to start building.

Sign in to see your apps or create a new app.

Generic embed code (insert your app key)

<script type="text/javascript" src="https://www.dropbox.com/static/api/two/dropins.js" id="dropboxjs" data-app-key="YOUR_APP_KEY"></script>

One fashion to embed content is using an anchor tag (<a>). Anchor tags with class=dropbox-embed and an href attribute set to a shared link will automatically expand the link into embedded content.

Here's an case of an anchor tag using the embed component with a shared link to an image stored in Dropbox:

<a    href="https://world wide web.dropbox.com/s/u0bdwmkjmqld9l2/dbx-supporting-distributed-work.gif?dl=0"    form="dropbox-embed" ></a>          

And here's the file preview embedded on the folio:

You can likewise set the height and width of the container chemical element by using the information-acme and data-width attributes. By default these values are set to 100%.

<a   href="https://www.dropbox.com/due south/u0bdwmkjmqld9l2/dbx-supporting-distributed-piece of work.gif?dl=0"   grade="dropbox-embed"   information-height="300px"   information-width="600px" ></a>          

This results in an embed with a specific container size:

Triggering the Embedder using JavaScript

Another way to use the Embedder is to embed content into a specific element using the JavaScript method Dropbox.embed(options, element). This approach tin be especially useful if you're trying to create embedded content dynamically.

The options object must contain a link and may optionally define file settings and folder settings.

An example folder embed:

            var options = {       // Shared link to Dropbox file       link: "https://www.dropbox.com/sh/keptcjl08q3wsid/AACui966iXcXPbagCJ2py2L-a?dl=0",       file: {         // Sets the zoom way for embedded files. Defaults to 'best'.         zoom: "best" // or "fit"       },       folder: {         // Sets the view mode for embedded folders. Defaults to 'list'.         view: "list", // or "grid"         headerSize: "normal" // or "small"       }     }     Dropbox.embed(options, element);          

By modifying these parameters, you tin can change the embedded content and the behavior of the Embedder:

• link - (required) - a Dropbox shared link to the content being embedded. Changing this link volition update the embedded content.
• file - (optional) - a file options object used to configure embedded file beliefs. May comprise the following parameters:
  • zoom - (optional) - a string that sets the level of zoom for embedded files. May be ready to the following values:
    • 'best' - (default) - sets the zoom mode to best, which sets the zoom of documents to the full width of the embed container. The zoom for other file content is set to the largest dimension (height or width) of the content being embedded.
    • 'fit' - sets the zoom manner to fit, which will automatically ready the file's zoom to the largest dimension of the embedded content. For documents, this mode sets the zoom to the largest dimension of the first page.
• folder - (optional) - a folder options object that contains settings to configure embedded folder behavior. May contain the following parameters:
  • view - (optional) - a string that sets the starting view mode for embedded folders, which may be ready to one of the post-obit values:
    • 'listing' - (default) - starts folder in list view
    • 'grid' - starts folder in filigree view
  • headerSize - (optional) - a string that sets the style of header to apply for the embedded folder
    • 'normal' - (default) - use the default size header, ideal for medium- to large-sized containers
    • 'pocket-sized' - use a smaller header, recommended for minor-sized containers

The snippet in a higher place embeds a preview of a Dropbox folder in listing view:

Removing the Embedder

The Dropbox.embed() function returns a reference to the Embedder that can be passed to the Dropbox.unmount() function to remove the Embedder from the certificate. This can exist used to replace the Embedder with a new one in gild to change the content, etc.

For example:

            const embed = Dropbox.embed(options, container);   ...   Dropbox.unmount(embed);          

Supported files

The Embedder supports many types of files ranging from multi-page docs to images. Currently, the Embedder does not back up sound or video.

Supported browsers

You can check whether a user's browser is supported by calling Dropbox.isBrowserSupported().

bingastive.blogspot.com

Source: https://www.dropbox.com/developers/embedder

Share this post