Feedback for “CldUploadWidget Examples”

[mutahir-riaz]

Here's a clear and concise email draft for contacting the Next.js team regarding the issue:

---

Subject: Issue with CldUploadWidget Handling of Image Upload and Folder Structure

Message:

Hi Next.js Team,

I'm encountering an issue with CldUploadWidget where not all selected files seem to appear in the Cloudinary response as expected. Here’s a summary of the problem:

• When I upload multiple images (for example, 4), only 3 URLs are returned from result.info.files in handleUploadSuccess. However, when I check Cloudinary, I see that all 4 images have been uploaded.
• Additionally, although I've set options.folder to title (to create a folder with the product title name), the files are not always placed within this specified folder. It seems like only 3 files end up in the folder, and one is missing from the designated location, even though all have uploaded.

Here is the code setup for the CldUploadWidget:

<CldUploadWidget
  uploadPreset="tqw4r7p7"
  onUpload={handleUploadSuccess}
  options={{
    resourceType: 'auto',
    multiple: true,
    folder: title,
  }}
>
  {({ open }) => (
    <button
      onClick={() => {
        if (!title) {
          alert("Please enter a title before uploading.");
        } else {
          open();
        }
      }}
      className="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-8 px-4 bg-green-600 text-white text-sm font-medium leading-normal"
    >
      Upload (Max: 5)
    </button>
  )}
</CldUploadWidget>

Could you help me understand why only a subset of URLs is returned, and why not all files are stored in the designated folder? Is there a workaround or a setting adjustment needed?

Thanks in advance for your assistance!

Best regards,
Syed Mutahir

[colbyfayock]

Please use onSuccess instead of onUpload. onUpload is deprecated as noted in the documentation. https://next.cloudinary.dev/clduploadwidget/configuration#callback-functions