[nextjs-clduploadwidget] How to Display my Assets on Page ?

[utkarsh-1602]

I'm using CldUploadWidget to Upload my assets to Cloudinary, but I want them to be displayed on my page also, how can I do that ?

My Code :

const UploadButton = () => {

  const [info, updateInfo] = useState();
  const [error, updateError] = useState();

  function handleOnUpload(error:any, result:any, widget:any) {
    if ( error ) {
      updateError(error);
      return;
    }

    updateInfo(result?.info);

    console.log("Result : ", result);
    console.log("Widget : ", widget);

    widget.close({
      quiet: true
    });
  }

  let uploadPreset = process.env.NEXT_PUBLIC_UPLOAD_PRESET;

  return (
    <>
    <main className={styles.container}>
        <CldUploadWidget uploadPreset={uploadPreset} onUpload={handleOnUpload}>
            {({ open }) => {
              function handleOnClick(e:any) {
                e.preventDefault();
                open();
              }
              return (
                <button type='button' className="btn btn-primary text-white" onClick={handleOnClick}>
                  Upload an Asset
                </button>
              )
            }}
          </CldUploadWidget>
    </main>
    </>
  )
}

[colbyfayock]

hey @utkarsh-1602 check out this example:

https://github.com/cloudinary-community/cloudinary-examples/blob/main/examples/nextjs-clduploadwidget/pages/index.js#L60

the info that you're already storing should include the information you need, including the URL, but also the public ID which you can use with the CldImage component:

https://next.cloudinary.dev/cldimage/basic-usage

[utkarsh-1602]

Thanks @colbyfayock That would solve my problem, I'm closing this issue.

[SprigganTwelve]

the onUplaod property is deprecated now, we have to use the onSucess property instead to solve that