fix(upload-widget): replace random script id with stable useId-based id

[error9098x]

Fixes #642, closes PR #616

Description

Use a stable, deterministic script element id for CldUploadWidget:

• Adds a small useStableId helper:
  • Uses React.useId() on React 18+ (SSR-safe), sanitized for colons.
  • Falls back to a per-instance useRef seed for React < 18.
• Replaces the previous random id (Math.floor(Math.random() * 100)) with the stable id so multiple instances don’t collide and hydration is more predictable.

No runtime dependencies changed.

Issue Ticket Number

Fixes #642

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Fix or improve the documentation
• This change requires a documentation update

Checklist

• I have followed the contributing guidelines of this project as mentioned in CONTRIBUTING.md
• I have created an issue ticket for this PR
• I have checked to ensure there aren't other open Pull Requests for the same update/change?
• I have performed a self-review of my own code
• I have run tests locally to ensure they all pass
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes needed to the documentation

--- a/next-cloudinary/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx +++ b/next-cloudinary/next-cloudinary/src/components/CldUploadWidget/CldUploadWidget.tsx @@ -import Script from 'next/script'; +import Script from 'next/script'; @@ -import { getCloudinaryConfig } from "../../lib/cloudinary"; +import { getCloudinaryConfig } from "../../lib/cloudinary"; + +// Stable ID hook supporting React < 18 fallback +const useStableId = () => { + if (typeof (React as any).useId === 'function') { + return (React as any).useId().replace(/:/g, ''); + } + return React.useRef(`id-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`).current; +}; @@ -}: CldUploadWidgetProps) => { - const cloudinary: CldUploadWidgetCloudinaryInstance = useRef(); +}: CldUploadWidgetProps) => { + const uniqueId = useStableId(); + const cloudinary: CldUploadWidgetCloudinaryInstance = useRef(); @@ - <Script - id={`cloudinary-uploadwidget-${Math.floor(Math.random() * 100)}`} + <Script + id={`cloudinary-uploadwidget-${uniqueId}`} src="https://upload-widget.cloudinary.com/global/all.js" onLoad={handleOnLoad} onError={(e) => console.error(`Failed to load Cloudinary Upload Widget: ${e.message}`)} />

[vercel]

@error9098x is attempting to deploy a commit to the Cloudinary DevX Team on Vercel.

A member of the Team first needs to authorize it.

[error9098x]

Hi @strausr, I've addressed your feedback from #616 in this PR!

I've implemented a useStableId hook that:

• Uses React 18's useId() when available
• Falls back to a stable ID generation for React 17 and below
• Maintains compatibility across all React versions

[strausr]

Thanks for the update!

[strausr]

@all-contributors Please add @error9098x for code

[allcontributors]

@strausr

I've put up a pull request to add @error9098x! 🎉

[github-actions]

🎉 This PR is included in version 6.17.1 🎉

The release is available on:

• pnpm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[devpatocld]

Hi @error9098x thanks so much for your contribution! can I get your email to send you the link to claim your swag? Thank you

[error9098x]

Hi @error9098x thanks so much for your contribution! can I get your email to send you the link to claim your swag? Thank you

@devpatocld here is my email : procodecavi@gmail.com :)

[devpatocld]

Thank you for your contribution to Hacktoberfest! As a token of our thanks, we at Cloudinary have emailed you with instructions on how to claim your bespoke 2025 swag pack @error9098x