cloudinary-community / cloudinary-community/svelte-cloudinary

[Bug] Cloudinary Upload Widget Cross-Triggering

Open
#176 2 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
MDX
Stars
36
Forks
23
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.