How to prevent auto upload?

[MubashirWaheed]

I am using CldUploadWidget and when I select the image it is automatically uploaded to the cloudinary. I don't want that I want the user to have ability to change the image only upload when he clicks save.

<CldUploadWidget
              onUpload={handleUpload}
              uploadPreset="blgqlrqz"
              options={{
                maxFiles: 1,
              }}
            >
              {({ open }) => {
                return (
                  <>
                    <input
                      id="profilePicture"
                      accept="image/*"
                      className={styles.hiddenImageInput}
                      onClick={() => open?.()}
                    />
                  </>
                );
              }}
            </CldUploadWidget>

  const handleUpload = (result) => {
    setProfileImage(result?.info?.secure_url);
    console.log("save following profile url in db:", result?.info?.secure_url);
    console.log("result:", result);
  };

[colbyfayock]

hey @MubashirWaheed im looking into if this is an option

in the meantime, i'm curious about the usage of the input in the code you're showing - is that your attempt to get around it? i wouldnt expect that to really work, usually you'd use a button to open the modal

[colbyfayock]

@MubashirWaheed it looks like we don't explicitly have this option - however, you can try adding cropping: true to the options, which adds a cropping step, that might work for your use case? not quite the same, but might help

otherwise here's an example that you may be able to use to base work off of that creates an endpoint to upload files starting from a form: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-upload-formdata