cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Announcements
Share your feedback on the Document Scanning Experience in the Dropbox App right here.

Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Embedder opens a blank page with Error: appkey must be provided

Embedder opens a blank page with Error: appkey must be provided

NJ-Gonzo
Explorer | Level 3
Go to solution

Im trying to open a popup window with an embedded Dropbox folder when a user hits a button.

When I hit the button, it opens a blank popup.

When I turn on the Developer > Javascript console (in safari) I see an error when the Dropbox.embed command runs.

The error is: "Error: appkey must be provided"

 

I am using the <script> line with the appkey directly copied from dropbox (cut and paste).  I replaced the appkey with all xxxx's just for this posting.

The var LinkID = [@field:Digital_File_link] pulls in the correct Dropbox link,  https://www.dropbox.com/xxxxx  and I verify this with the window.alert(LinkID) line.

 

The chooser / Saver / Embedder domains value is set to the domain the script is running on.

 

What am I missing?

 

Thanks in advance!

 

The following code is what I am using.

---------

 

<button onclick="openDropboxLink()">Open Dropbox Link</button><script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxxxxxxxxxxxx"></script>
<script>
var LinkID ='[@field:Digital_File_link]';

function openDropboxLink() {

 

window.alert(LinkID);

var options = {
link: LinkID,
folder: {
view: "list",
headerSize: "normal"
}
};


var element = window.open('', '_blank', 'width=1200, height=800');

Dropbox.embed(options, element);


}

</script>

 

1 Accepted Solution

Accepted Solutions

Здравко
Legendary | Level 20
Go to solution

@NJ-Gonzo wrote:

... but I need a way to embed the dropbox folder on the page after they log in.

...


Hm.. All good, but what you're doing in code posted in OP doesn't meet "embed the dropbox folder on the page"! To be able embed something (your folder) somewhere (on any page including yours), you need to select place in the target page and embed there, not to open new page and try "embed" (if could be said so). There are 2 ways and which one is better depends on where you get your folder link (server side or client side). If you received the link on server side, it becomes easy - just put on the place where your folder should appear "a" tag with link put there. I.e. something like:

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxxxxxxxxxxxx"></script>
<a href="[@field:Digital_File_link]" class="dropbox-embed" data-height="800px" data-width="1200px"></a>

That's enough. 😉 The Dropbox' script will take care to replace the "a" node to content of the mentioned link ([@field:Digital_File_link]) automated.

If you're receiving link in dynamic way (after page load), then you have to use 'Dropbox.embed' when the link becomes available (cause you cannot embed it in page in advance as shown above). You still have to denote a place where your folder will appear (or create such in dynamic way). After the link is ready, you have to pass a reference to desired element (not a window!!!) to 'Dropbox.embed'. I.e. something like:

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxxxxxxxxxxxx"></script>​
<div id="dropboxContainer" style="width: 1200px;height: 800px;"></div>
...
var element = document.getElementById("dropboxContainer");
var options = {link: LinkID, folder: {view: "list", headerSize: "normal"}};
Dropbox.embed(options, element);

Hope it's a bit more clear now. 😉

View solution in original post

3 Replies 3

Здравко
Legendary | Level 20
Go to solution

Hi @NJ-Gonzo,

Hm..🤔 Why would you want to "embed" Dropbox link in a new window? What does actually mean embed here? 🧐

It would be more meaningful, I think, to just launch you link in the new window like following:

window.open(LinkID, '_blank', 'width=1200, height=800');

Don't you agree? 😉

Hope this helps.

NJ-Gonzo
Explorer | Level 3
Go to solution

Thanks.

 

Perhaps I should explain more about what I am trying to do.

 

I have a video production business and I send my clients their finished files via dropbox. Normally I just send them the link and all is done. But I am trying to create a platform where my clients can login to my website and view their files on dropbox.  I have designed the front end. (login etc...) but I need a way to embed the dropbox folder on the page after they log in.

 

Perhaps i'm over complicating things, but at least that was the idea... My research came up with using the embedder feature, which is where I am now, and where I am stuck.

 

thoughts?

 

 

Здравко
Legendary | Level 20
Go to solution

@NJ-Gonzo wrote:

... but I need a way to embed the dropbox folder on the page after they log in.

...


Hm.. All good, but what you're doing in code posted in OP doesn't meet "embed the dropbox folder on the page"! To be able embed something (your folder) somewhere (on any page including yours), you need to select place in the target page and embed there, not to open new page and try "embed" (if could be said so). There are 2 ways and which one is better depends on where you get your folder link (server side or client side). If you received the link on server side, it becomes easy - just put on the place where your folder should appear "a" tag with link put there. I.e. something like:

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxxxxxxxxxxxx"></script>
<a href="[@field:Digital_File_link]" class="dropbox-embed" data-height="800px" data-width="1200px"></a>

That's enough. 😉 The Dropbox' script will take care to replace the "a" node to content of the mentioned link ([@field:Digital_File_link]) automated.

If you're receiving link in dynamic way (after page load), then you have to use 'Dropbox.embed' when the link becomes available (cause you cannot embed it in page in advance as shown above). You still have to denote a place where your folder will appear (or create such in dynamic way). After the link is ready, you have to pass a reference to desired element (not a window!!!) to 'Dropbox.embed'. I.e. something like:

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxxxxxxxxxxxxxx"></script>​
<div id="dropboxContainer" style="width: 1200px;height: 800px;"></div>
...
var element = document.getElementById("dropboxContainer");
var options = {link: LinkID, folder: {view: "list", headerSize: "normal"}};
Dropbox.embed(options, element);

Hope it's a bit more clear now. 😉

Need more support?
Who's talking

Top contributors to this post

  • User avatar
    Здравко Legendary | Level 20
  • User avatar
    NJ-Gonzo Explorer | Level 3
What do Dropbox user levels mean?