Dropbox file selection issue

Hi everyone,

I’m currently facing an issue while integrating Dropbox with my application. I’m using the Uppy library to handle file uploads and imports from Dropbox. However, I’m encountering a CORS policy error and an HTTP 400 error when trying to list folders in Dropbox.

Here’s the setup:

  • Environment: Staging
  • Platform: React
  • Library: Uppy, Uppy remote-source

Error Details:

  1. CORS Policy Error:
Access to fetch at 'https://companion.ezycreate.com/dropbox/list/%2Fphotos' from origin 'https://staginguploader.ezycreate.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  1. HTTP 400 Error:

HTTP 400: Error in call to API function "files/list_folder": request body: path: '%2Fphotos' did not match pattern '(/(.|[\r\n])*)?|(ns:[0-9]+(/.*)?)'

I’ve tried several things, but nothing seems to be working. Here are the steps I’ve taken so far:

  1. Ensured that the correct permissions are set in the Dropbox app configuration.
  2. Double-checked the API endpoint URLs.
  3. Confirmed that the preflight requests are being sent correctly.

It seems like the issue is with the preflight CORS request and possibly the URL encoding or the path parameter not matching the required pattern.

Has anyone faced a similar issue or have any suggestions on how to resolve this? Any help or pointers would be greatly appreciated.

Thanks in advance for your assistance!