CldUploadWidget

[priyopujonggo]

I have write a next-cloudinary CldUploadWidget like that

<CldUploadWidget onUpload={onUpload} uploadPreset="blablabla">
        {({ open }) => {
          const onClick = () => {
            open();
          };
          return (
            <Button 
              type="button" 
              disabled={disabled} 
              variant="secondary" 
              onClick={onClick}
            >
              <ImagePlus className="h-4 w-4 mr-2" />
              Upload an Image
            </Button>
          );
        }}
      </CldUploadWidget>

and I have got error Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'open')
components\ui\image-upload.tsx (59:12) @ open

57 | {({ open }) => {
58 | const onClick = () => {

59 | open();
| ^
60 | };
61 |
62 | return (
is anyone can help me to solve this problem

[colbyfayock]

hey @priyopujonggo sorrry for the delay in getting back, haven't been able to reproduce this yet, I tried with my own following code:

<CldUploadWidget onUpload={onUpload} uploadPreset="next-cloudinary-unsigned">
  {({ open }) => {
    const onClick = () => {
      open();
    };
    return (
      <button 
        className="inline-block rounded bg-blue-600 py-2.5 px-6 text-sm font-bold uppercase text-white hover:bg-blue-500"
        type="button" 
        onClick={onClick}
      >
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

I wonder if it's possible that the widget isn't loading properly. from within the code:

  function open() {
    if (!widget.current) {
      widget.current = createWidget();
    }

    widget?.current.open();

so perhaps widget?.current is still undefined in your instance...

are you seeing any other network requests fail?

can you see if a JavaScript file is being loaded from https://upload-widget.cloudinary.com/2.8.3/global/all.js
?

might have a different version