2

After switching to API V2 authentication, now the step of launching the Dropbox Chooser is failing with this error.

Uncaught Error: Failed to open/load the window. Dropbox.choose and Dropbox.save should only be called from within a user-triggered event handler such as a tap or click event.
at E (https://www.dropbox.com/static/api/2/dropins.js:1:9789)
at x (https://www.dropbox.com/static/api/2/dropins.js:1:11599)
at Object.Dropbox.choose (https://www.dropbox.com/static/api/2/dropins.js:1:11672)
at HTMLImageElement.document.getElementById.onclick (https://client1.qa.mydomain.net/Scripts/Documents.js?v=4.5.0.18023:630:21)
at Object.trigger (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js:4:5679)
at HTMLImageElement.<anonymous> (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js:4:6138)
at Function.each (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js:2:2715)
at r.fn.init.each (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js:2:1003)
at r.fn.init.trigger (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js:4:6114)
at r.fn.init.r.fn.(anonymous function) [as click] (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js:4:6532)

I haven't modified the JS code, I do have this code embedded with my own App's client ID.

<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="xxx"></script>

And this is the same code that worked for API V1 unchanged which triggered the chooser.

document.getElementById("DropBoxImg").onclick = function () {
    Dropbox.choose({
    linkType: "direct",
    multiselect: DocumentModule.MultiSelectBool(),
    success: function (files) {
        DocumentModule.SetJsonFile(JSON.stringify({ files: files }));
        DocumentModule.CloudUploadClick();
        DocumentModule.DisplaySpinner(false);
    },
    cancel: function () {
    },
    extensions: ['.doc', '.docx', '.xls', '.txt', '.html', '.htm', '.tiff', 
        '.tif', '.jpg', '.jpeg', '.gif', '.pdf', '.xlsx']
    });
};

And the above click event is triggered as follows

$('#DropBoxImg').click();

All I can think of the difference between the V1 and V2 change now is the way I'm authorizing the user.

Any help will be appreciated.

8
  • 1
    Is your $('#DropBoxImg').click(); being triggered by an actual user tap/click event? If you're calling it without a user event, the browser may block the window.
    – Greg
    Commented Sep 26, 2017 at 20:17
  • 1
    I'm calling it without a user interaction, and this was working fine before I started the migration to API V2. And thanks for clarifying the chooser's version isn't related to the API versions. So, like I've said the only code change to the existing code is that the user is authorized with API v2 calls now, and no change is made to the JS code.
    – Ninos
    Commented Sep 26, 2017 at 21:45
  • 1
    The moment I roll back the authorization code to V1, the chooser shows up. The only difference between the two is with v2 and OAuth2 it requires a callback URL to be configured in the App, and the old parameters that were passed to the callback now are part of the State parameter. This is causing the callback URL to be different so I'm not sure how that can be related to this?
    – Ninos
    Commented Sep 26, 2017 at 21:50
  • 1
    Regardless of which version of the Dropins library you're using, you should only trigger the Chooser on an actual user click event, otherwise it may be blocked as a popup.
    – Greg
    Commented Sep 27, 2017 at 17:42
  • 1
    Also, I'm not sure I follow your second comment. Use of OAuth 2, including a redirect URI and state parameter are entirely unrelated to the Chooser, which doesn't use OAuth.
    – Greg
    Commented Sep 27, 2017 at 17:42

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.