We are aware of the issue with the badge emails resending to everyone, we apologise for the inconvenience - learn more here.

Forum Discussion

Standa Fy's avatar
Standa Fy
Explorer | Level 4
30 days ago

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.

  • Greg-DB's avatar
    Greg-DB
    Icon for Dropbox Staff rankDropbox Staff

    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's avatar
      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's avatar
        Greg-DB
        Icon for Dropbox Staff rankDropbox 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?

About Dropbox API Support & Feedback

Node avatar for Dropbox API Support & Feedback

Find help with the Dropbox API from other developers.

5,877 PostsLatest Activity: 3 hours ago
325 Following

If 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!