Child Item

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 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.

Find more posts tagged with

Comments

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?

Standa Fy

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-Des

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 the app_key parameter is set to undefined.

Standa Fy

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.

DB-Des

Hi @Standa Fy,

Could you also confirm that you have added the respective domain(s) for the app you are using in the app's "Chooser / Saver / Embedder domains" field, from within the App Console?

DB-Des

Hi @Standa Fy,

Just wanted to provide you with an update.

After thorough testing, we were able to replicate the issue have described. However, it appears that the problem is isolated to the Chrome browser.

During our tests, we found that the issue could not be reproduced in other browsers, such as Safari and Firefox, where everything functioned as expected. This suggests that the issue is likely specific to Chrome.

Standa Fy

Hi @DB-Des,

yes the domains are added and the functionality works as expected save for the random occurrences of the problem described.

Yes as I wrote the problem manifested for me only in Google Chrome which is however largest by marketshare. Now that you have confirmed the issue what have you decided will be the resolution, if any?

Greg-DB

@Standa Fy Thanks for providing the sample. I also tried this out and was able to reproduce the issue with your sample in Chrome. When inspecting the relevant request in the developer tools in Chrome, I see the request does receive a response, including a successful status code (200) and headers. When attempting to view the response body, Chrome instead shows an error "Failed to load response data: Request with the provided ID does not exists", which seems unexpected, since the request does exist (as Chrome is already showing the relevant request information).

From what we've found so far, there doesn't seem to be a failure on the Dropbox side, so I'm afraid there isn't anything we can fix for this on our side. It appears to be an issue in Chrome around the request/response handling in this sort of scenario.

Standa Fy

Hi @Greg-DB,

okay, thank you for the response.