How do I get back the generated filename after uploading to Cloudinary widget in ReactJS?

Question

I'm using react-cloudinary-upload-widget in my React app to allow users to upload a profile picture. The idea is to store the image on Cloudinary and store its name in my MySQL database with the rest of the user's info. The widget uploads files correctly to my users folder, but doesn't return anything when the upload is complete. The code on github* makes it look like it should console.log on success or on failure, but nothing appears in the console. I tried passing a function in to onSuccess and it was never called. I need to (1) confirm that the upload was a success and (2) get the filename back so I can store it.

*https://github.com/bubbaspaarx/react-cloudinary-upload-widget/blob/master/src/functions/myWidget.js

React 18.1.0, react-cloudinary-upload-widget 1.6.0

cloudinary-uploader.js:

import { WidgetLoader, Widget } from 'react-cloudinary-upload-widget'

const CloudinaryUploader = () => {

  return (
    <>
      <WidgetLoader /> 
      {/* // add to top of file. Only use once. */}
      <Widget
        sources={['local', 'url', 'camera', 'google_drive', 'facebook']}
        sourceKeys={{ }} 
        resourceType={'image'} 
        cloudName={'mycloud'} 
        uploadPreset={'zgewmw5t'} 
        buttonText={'New image'} 
        style={{
              color: '#372e29',
              border: 'none',
              width: '120px',
              backgroundColor: '#ecca73',
              borderRadius: '4px',
              height: '25px',
              cursor: 'pointer',
              borderRadius: '3px',
              fontFamily: 'Rubik, sans-serif',
              border: '2px solid #ecb939'
            }} 
        folder={'users'} 
        cropping={false} 
        multiple={false} 
        autoClose={true} 
        onSuccess={null} 
        onFailure={null} 
        logging={false} 
        customPublicId={'sample'}
        eager={null} 
        use_filename={false}

        widgetStyles={{
            palette: {
                window: "#FFFFFF",
                windowBorder: "#726255",
                tabIcon: "#BF8900",
                menuIcons: "#372E29",
                textDark: "#372E29",
                textLight: "#FFFFFF",
                link: "#ECB939",
                action: "#FF620C",
                inactiveTabIcon: "#372E29",
                error: "#F44235",
                inProgress: "#0078FF",
                complete: "#20B832",
                sourceBg: "#F5E4BB"
            },
          fonts: {
            default: null,
            "'Fira Sans', sans-serif": {
              url: 'https://fonts.googleapis.com/css?family=Fira+Sans',
              active: true
            }
          }
        }} 
        destroy={true} 
      />
    </>
  )
}

export default CloudinaryUploader```

I tried this:

```  onSuccess={nextFunction()} ```

The function contained a console.log to show it was called.

Answer 1

You can check the status of your upload using result.event === "success", and get the file name with result.info.

So a full example would be:

    var myWidget = window.cloudinary.createUploadWidget(
      {
        cloudName: "<cloud_name>",
        uploadPreset: "<upload_preset>"
      },
      (error, result) => {
        if (!error && result && result.event === "success") {
          console.log("Done! Here is the image info: ", result.info);
        }
      }
    );

Check out this full example, I took it from this ticket.