@capacitor/camera pickImages cancellation is not catched in web

[Newbie012]

Bug Report

Plugin(s)

Capacitor Version

   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 3.6.0
  @capacitor/core: 3.6.0
  @capacitor/android: 3.6.0
  @capacitor/ios: 3.6.0

Installed Dependencies:

  @capacitor/cli: 3.5.0
  @capacitor/core: 3.5.0
  @capacitor/android: 3.5.0
  @capacitor/ios: 3.5.0

Platform(s)

web

Current Behavior

While triggering Camera.pickImages in the web platform and then canceling the operation, nothing is being thrown, and the function never resolves. This leads to a memory leak:

Expected Behavior

While canceling the image picking, a rejection should be invoked for proper handling.

Code Reproduction

1. Open https://stackblitz.com/edit/vitejs-vite-pveyhh?file=src/App.tsx
2. Notice the app starts with Status: idle
3. Click the pick image button
4. Text should be changed to Status: pending
5. Close file picking without any image selection.
6. Text should've been switched to rejected, but still in pending, and the promise is pending as well.

Other Technical Details

While looking at the source code: https://github.com/ionic-team/capacitor-plugins/blob/0fb107ac46bca30ba7c1a7c09a93c866e6c40f87/camera/src/web.ts#L47-L49

It appears that the web doesn't handle any rejects.

Additional Context

[Newbie012]

After doing a bit of some digging, it turns out that apparently, there's no cancel event or any indication for that in some cases, which would probably explain why this is not implemented. Maybe we should add a timeout option for rejection?

[LucEnden]

Any news on when this issue will be fixed? As of today I am still able to reproduce this error...

Code bellow displays the same behavior as described in the bug:

const picture = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Photos
}).then((result) => {
    console.debug('Picture upload result', result); // does not appear
    return result;
}).catch((error) => {
    console.error('Error while uploading a picture', error); // does not appear
    return undefined;
}).finally(() => {
    console.log('Done uploading') // does not appear
});

[SvenBudak]

This issue is really a problem. For example, we have a view where a user can upload a cover and avatar image. When the user clicks on the avatar upload and cancels, the input is still in the DOM. When the user now uploads a cover image, the image will be applied to the avatar.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of the plugin, please create a new issue and ensure the template is fully filled out.