[Bug] CldUploadButton onUploadAdded not returning public_id

[perrywink]

Bug Report

Describe the bug

The public id is not being returned in the onUploadAdded callback in CldUploadButton. It does get returned however in the deprecated onUpload callback.

Is this a regression?

As described, the old callback still produces the public ID on image upload, but the new callback does not do so. The docs indicate that this should be present but using it just returns an undefined field.

Steps To Reproduce the error

1. Create an unsigned upload preset on Cloudinary Console
2. In Next Project, have a minimal upload widget with a callback that console logs the public ID

   <CldUploadButton
   uploadPreset="<upload preset>"
   onUploadAdded={(result) => {
   console.log(result)
   if (result.info && typeof result.info !== 'string') {
     console.log("PUBLIC ID", result.info.public_id);
   }
   }}
   />

Expected behaviour

A public ID should get returned in onUploadAdded.

Screenshot or Video Recording

Your environment

• OS: Win11
• Node version: v20.10.0
• Npm version: 10.2.3
• Browser: Chrome

Additional context

You can modify the code snippet above to use onUpload instead to see the difference.

[colbyfayock]

thanks for the report, im able to reproduce that as well, though im not sure if that's something i control... looking into it and seeing if it's a bug with the underlaying widget

[colbyfayock]

i was able to reproduce this in a non Next.js project. filing an issue with the appropriate team and will report back once i have a resolution

[colbyfayock]

hey @perrywink it turns out that the public ID will only be available in that event callback if you're manually specifying a public ID as part of the upload, is that the case?

with the assumption that it's not, the Cloudinary backend server generates the public ID where this event is a clientside event from the widget, specifying that the file was added to the upload sequence, so the public ID wouldn't be available until the entire result of the upload is available

im hoping to get this clarified in the Cloudinary documentation reference: https://cloudinary.com/documentation/upload_widget_reference#upload_added

did you have a particular use case in mind that perhaps another event would be more appropriate?

[perrywink]

Hi @colbyfayock, yes I am not specifying the public ID as part of the upload. Given the current way I am uploading using the <CldUploadButton/> component, is it possible to do so?

Also, if the flow has been altered such that public ID wouldn't be available until the entire result of the upload is available, is there some callback or check we can rely on to retrieve the public ID once it is there?

I am currently trying to display the image once it has been successfully uploaded in the component, but it seems that this is only achievable via the deprecated onUpload callback currently.

For reference, I am currently following this tutorial and am trying to get the result shown around 16:50.

[colbyfayock]

apologies for the confusion, in a recent major release, i deprecated onUpload in favor of onSuccess to match the events that get dispatched by the Upload Widget: https://cloudinary.com/documentation/upload_widget_reference#events

so in your example, you would want:

<CldUploadButton
  uploadPreset="<upload preset>"
  onSuccess={(result) => {
    console.log(result)
    if (result.info && typeof result.info !== 'string') {
      console.log("PUBLIC ID", result.info.public_id);
    }
  }}
/>

i may consider bringing it back, not only because of the tutorial, but the reason I named it onUpload in the first place was it felt like an appropriate name for the action, but will consider that and see if more feedback similar to this comes through

let me know if for some reason the above doesn't work

[perrywink]

Exactly what I was looking for. Thank you!