How to programmatically set Public ID with CldUploadWidget ?

[ryanleeallred]

I'd like to use Cloudinary to store user's profile pictures. I'm currently using the CldUploadWidget to do this with unsigned uploads.

I would like to set the image's Public ID to be the user's username (unique) when the image is uploaded. That way, the image src will already be known for easy use with CldImage –and also, any future uploads from the same user will overwrite any image that they might have uploaded previously.

I've dug through the CldUploadWidget Configuration Docs as well as the UploadWidget API Reference, but can't seem to figure out how to piece the different parts together.

Below is simplified code for my component. I'm hardcoding the username here to be "admin". That would normally be provided by a NextAuth user session.

import { useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";

import { CldUploadWidget, CldImage } from "next-cloudinary";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCamera } from "@fortawesome/free-solid-svg-icons";

export default function Profile() {
  const router = useRouter();
  const username = "admin";
  const [imageId, setImageId] = useState(username);

  return (
    <div className="relative">
      <CldUploadWidget
        uploadPreset="<Upload Preset>"
        
        // SOMETHING HERE TO SET PUBLIC_ID ???

        onClose={(widget) => router.reload()}
      >
        {({ open }) => {
          function handleOnClick(e) {
            e.preventDefault();
            open();
          }
          return (
            <button className="button" onClick={handleOnClick}>
              <FontAwesomeIcon
                icon={faCamera}
                className="absolute top-[50%] left-[50%] -translate-x-1/2 -translate-y-1/2 text-white opacity-70 text-[60px] cursor-pointer"
              />
            </button>
          );
        }}
      </CldUploadWidget>
      <div className="object-cover">
        {imageId === "/images/site/user_placeholder.png" && (
          <Image
            width="300"
            height="300"
            src={imageId}
            alt={`${username} profile picture`}
            className="m-auto h-[300px] rounded-full"
          />
        )}
        {imageId === username && (
          <CldImage
            width="300"
            height="300"
            src={imageId}
            alt={`${username} profile picture`}
            onError={(e) => setImageId("/images/site/user_placeholder.png")}
            className="m-auto h-[300px] rounded-full"
          />
        )}
      </div>
    </div>
  );
}

[ryanleeallred]

I've tried

<CldUploadWidget
        uploadPreset="<Upload Preset>"
        options={{
          publicId: username,
        }}
        onClose={(widget) => router.reload()}
      >
...
</CldUploadWidget>

But it appears that unsigned uploads don't allow for overwriting files with the same Public ID? I thought there was a setting within the upload preset to allow for files to be overwritten but I think I was mistaken? Do I need to be using signed uploads here?

[colbyfayock]

yeah i would expect that to be able to work for you, i just tried it myself with the docs code and had no issues:

<CldUploadWidget
  uploadPreset="next-cloudinary-unsigned"
  options={{
    publicId: 'colby'
  }}
  onUpload={(result, widget) => {
    setResource(result?.info);
    widget.close();
  }}
>
  {({ open }) => {
    function handleOnClick(e) {
      e.preventDefault();
      open();
    }
    return (
      <button className={styles.button} onClick={handleOnClick}>
        Upload an Image
      </button>
    );
  }}
</CldUploadWidget>

tested here with unsigned but also tested with my signed example

by any chance have you tested if username is working as intended?

also wondering if perhaps there's some kind of restriction on the upload preset? such as: