[Bug] Cloudinary Upload Widget Cross-Triggering

[cptcrunchy]

Bug Report

Describe the bug

The single image upload widget is triggering an API call for multiple files widget when it shouldn't. Specifically, when using the CldUploadWidget component with multiple: false for single uploads, it inadvertently triggers the API endpoint for a separate CldUploadWidget with multiple: true configuration on the same page.

Is this a regression?

Yes, this behavior used to work correctly in version 1.2.0 of svelte-cloudinary. The components properly isolated their uploads without cross-triggering.

Steps To Reproduce the error

1. Create a page with multiple CldUploadWidget components - some with multiple: false and some with multiple: true
2. Configure each widget with different type parameters that get sent to the API endpoint
3. Click the upload button on a single-file widget and upload a file
4. Check the network requests in developer tools
5. Observe that both the single-file API endpoint and the multiple-file API endpoint are called

Expected behaviour

Only the API endpoint corresponding to the widget being interacted with should be called. The single-file upload should not trigger API calls intended for the multiple-file upload widgets.

CodeSandbox or Live Example of Bug

N/A

Screenshot or Video Recording

N/A

Your environment

• OS: macOS Sonoma 14.4.1
• Node version: 20.12.2
• Npm version: 10.5.0
• Browser name and version: Chrome 123.0.6312.87

Additional context

This issue appears to be related to event propagation or shared state between widget instances. The Cloudinary Upload Widget may not be properly isolating instances, causing events from one widget to affect others on the same page. Attempted workarounds:

Using different event handlers for each widget type (onSuccess vs onQueuesEnd) Adding event.stopPropagation() to click handlers Setting unique folder and uploadPreset values for each widget

None of these completely resolved the issue. A possible fix might involve better isolation of widget instances or creating a wrapper component that ensures proper cleanup and event isolation.

[ghostdevv]

Looking into this 🙏