Re: Triggering the Embedder using JavaScript

IceManLoneWolf · ‎09-16-2020

var options = {
      // Shared link to Dropbox file
      link: "https://www.dropbox.com/sh/keptcjl08q3wsid/AACui966iXcXPbagCJ2py2L-a?dl=0",
      file: {
        // Sets the zoom mode 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);

In addition to the above code and the embed code snippet is there anything else I need to get the dropbox embedder to work? Embedding via anchor links works, but I can't trigger it using the javascript code above in order to customize it a bit.

Greg-DB · ‎09-17-2020

Thanks! Yes, you'll also need to define "element" which will depend on your page, but should be the element on your page where you want to put the Embedder.

For example, if you have an element on your page like this:

<div id="folder_container"></div>

Then you might define 'element' like this:

var element = document.getElementById("folder_container");

View solution in original post

Greg-DB · ‎09-17-2020

What error, if any, do you get in the JavaScript Console when you try this?

From what I can see, it looks like it may just be a syntax error. You're missing a comma here:

// view: "list" // or "grid"

It should be:

view: "list", // or "grid"

IceManLoneWolf · ‎09-17-2020

Thanks for responding. I get the following error in console.

Uncaught ReferenceError: element is not defined

Greg-DB · ‎09-17-2020

Thanks! Yes, you'll also need to define "element" which will depend on your page, but should be the element on your page where you want to put the Embedder.

For example, if you have an element on your page like this:

<div id="folder_container"></div>

Then you might define 'element' like this:

var element = document.getElementById("folder_container");

IceManLoneWolf · ‎09-17-2020

Thanks. That did the trick.

Bryantsssss · ‎10-25-2022

Do you have an example of the full code? I am still having the same issue.

Greg-DB · ‎10-26-2022

@Bryantsssss Exactly how the code should look will depend on your scenario and what you're trying to build. You can find the full instructions, plus a live working example, on the Embedder page here.

Here's what a minimal example of triggering the Embedder using JavaScript might look like:

<!DOCTYPE html>
<html>

    <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
    <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="APPKEYHERE"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            var url = "https://www.dropbox.com/s/u0bdwmkjmqld9l2/dbx-supporting-distributed-work.gif?dl=0";
            var element = document.getElementById("file_container");
            var options = {
              link: url,
              file: {
                zoom: "best"
              }
            };
            Dropbox.embed(options, element);
        });

    </script>

    <div style="height:600px;width:800px" id="file_container"></div>

</html>

Bryantsssss · ‎10-26-2022

Thank you so much, the code worked! Do you have any suggestions for how to implement this with a password-protected folder? Sadly will not work if I use one.

Bryantsssss · ‎10-26-2022

Should clarify - password protected link makes me leave the page and no longer allows me to view files in the embedded view. Any way to have the user enter the password inside the embed?

Greg-DB · ‎10-26-2022

@Bryantsssss No, unfortunately there's no option for that, but I'll pass this along as a feature request. I can't promise if or when that might be implemented though.