You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.
Forum Discussion
Embedder opens a blank page with Error: appkey must be provided
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>
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. 😉
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.
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?
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. 😉
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
