Embedder fails to load

[Standa Fy]

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 function is called but contains empty document. I also don't see any errors in console or failed network requests.

I am using a dynamically loaded dropins.js script and the embedder is unmounted on OnDestroy of the component.

[Greg-DB]

Unfortunately I can't say what the issue might be from this information. Do you have a sample page showing the issue we could take a look at?

[Standa Fy]

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]

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?