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
Standa Fy
2 months agoExplorer | Level 4
Embedder fails to load
Hi, I am using the embedder in Angular application and unreliably(and with no clear pattern I can see) it fails to load data. I can see that the iframe is created in the element after the embed func...
Standa Fy
Explorer | Level 4
Unfortunately I do not have a minimal sample page I can give you access to but this is a minimal Angular component exhibiting the issue. To use simply set appKey and shareLink and integrate the component into Angular application.
Meanwhile the common issue is that the request from dropbox dropins.js script to https://www.dropbox.com/dropins/embed endpoint receives no data even though the status is 200. So far this seems to happen with Chrome browser(tested with Chrome and Firefox), the instance is standard latest version with no plugins.
Spoiler
import {
ChangeDetectionStrategy,
Component,
ElementRef,
ViewChild
} from '@angular/core';
@Component({
template: `
<button *ngIf="!embedderRef" (click)="mount()">Mount</button>
<button *ngIf="embedderRef" (click)="unmount()">Unmount</button>
<div class="full-height">
<span #dropboxEmbed></span>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class DropboxIntegrationComponent {
private loadAPI: Promise<any>;
public embedderRef: any;
private appkey = '';
private shareLink = '';
@ViewChild('dropboxEmbed', {static: true})
public dropboxEmbed: ElementRef;
constructor() {
this.loadAPI = new Promise((resolve) => {
const node = this.loadScript('dropboxjs', 'https://www.dropbox.com/static/api/2/dropins.js', [{
name: 'data-app-key',
value: this.appkey
}]);
if (node) {
node.onload = () => {
resolve(true);
};
} else {
resolve(true);
}
});
}
public mount() {
this.embedDropboxView();
}
public unmount() {
const dropboxObject: any = window[<any>'Dropbox'];
if (this.embedderRef && dropboxObject && dropboxObject.unmount) {
dropboxObject.unmount(this.embedderRef);
this.embedderRef = undefined;
}
}
private embedDropboxView() {
const options = {
link: this.shareLink,
file: {
zoom: 'best'
},
folder: {
view: 'list',
headerSize: 'normal'
}
};
const dropboxObject: any = window[<any>'Dropbox'];
if (dropboxObject && dropboxObject.embed) {
this.embedderRef = dropboxObject.embed(options, this.dropboxEmbed.nativeElement);
}
}
private loadScript(id: string, src: string, customAttributes: {name: string, value: string}[]) {
let isFound = false;
const scripts = document.getElementsByTagName('script');
for (let i = 0; i < scripts.length; ++i) {
const f = scripts[i].getAttribute('id');
if (scripts[i].getAttribute('id') == id) {
isFound = true;
}
}
if (!isFound) {
const dynamicScript = src;
const node = document.createElement('script');
node.src=dynamicScript;
node.type = 'text/javascript';
node.async = false;
node.id = id;
customAttributes.forEach(attr => node.setAttribute(attr.name, attr.value));
document.getElementsByTagName('head')[0].appendChild(node);
return node;
}
return undefined;
}
}
Greg-DB
2 months agoDropbox Staff
Thanks for following up. Also just to confirm, can you let me know if it does or doesn't happen for you on the Embedder documentation page in Chrome as well?
If it doesn't happen for you there, we'll need to investigate more specifically. I don't have an Angular environment where I can run your sample code though; at your convenience, can you deploy that sample so we can try it?
- Standa Fy2 months agoExplorer | Level 4
So far it did not happen to me on the documentation page, curiously it also did not happen in my code so far while using share link to the file but happens when using share link to a folder.
Here is a basic demonstration of the code that has this problem in my testing environment on stackblitz but unfortunately I could not figure out how to enable connecting to dropbox from there even with adding the domain to the app console.
https://angular-ivy-nhtqam.stackblitz.io- DB-Des2 months agoDropbox Engineer
Hi Standa Fy,
Your app does not appear to be saving the App key that is entered in the app-key field.
You can confirm in the Network tab of the Developer Console that, even though the call to /dropins/embed is successful (
200
), the value of theapp_key
parameter is set toundefined
.- Standa Fy2 months agoExplorer | Level 4
Well this is embarrassing, sorry. In my haste I forgot to properly adapt the sample code. It is now fixed on the same address. Simply click load script after setting the app key.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
5,883 PostsLatest Activity: 2 days agoIf you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.
For more info on available support options for your Dropbox plan, see this article.
If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!