How do you modify the public id for an image asset uploaded with the CldUploadWidget component?

Unicorn_Barf
Unicorn_Barf Member Posts: 1 ✭
edited June 14 in Developer APIs

I have a nextjs app that is implementing Cloudinary uploads using the CldUploadWidget react component. Everything is working great except that I have been unable to modify the public id for uploaded assets. I have my upload preset configured in my cloud settings to allow overwrites, unique filename: false, and use Filename: true. Below is my configuration for the widget.

<CldUploadWidget
        signatureEndpoint="/api/sign-image"
        uploadPreset="digiwafer"
        options={{
          autoMinimize: false,
          cropping: true,
          croppingAspectRatio: 1,
          croppingValidateDimensions: true,
          multiple: false,
          thumbnails: "#thumbnail-container",
          resourceType: "image",
          publicId: `digiwafer/${publicId}`,
        }}
        onSuccess={uploadSuccess}
        onOpen={(widget) => {
          console.log(widget);
          widget.update((widget) => {
            console.log(widget.options.publicId);
            return {
              ...widget,
              options: { publicId: `folder/${publicId}` },
            };
          });
        }}
        onClose={(results) => {
          console.log(results);
        }}
      >
        {({ open, results }) => {
          return (
            <button
              type="button"
              onClick={() => open()}
            >
              Upload an Image
            </button>
          );
        }}
      </CldUploadWidget>

Any help would be greatly appreciated! In the meantime, I will keep trying.

Tagged:

Answers

  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 150

    Hey @Unicorn_Barf. Thanks for getting in touch. Great name btw 🌈🦄

    The Next integration is actually built by the community, so I'm afraid we're not able to support it directly. I would assume that specifying the public ID as you have done in the options should work, but I'm not seeing that in the documentation. I'm also not seeing mention of publicId or "public_id" when doing a search on the GitHub repo.

    It may not be possible to specify the public ID manually, but I would suggest getting in touch with the package's dev team via the "Community & Support" section mentioned here on NPM to confirm.

    I hope this helps!

    -Danny

Categories