create-cloudinary-react 1.0.0-beta.1 → 1.0.0-beta.8

package/templates/.gitignore.template

@@ -16,6 +16,8 @@ dist-ssr
 .env
 .env.local
 .env.production
+# Server-only env (for secure signed uploads); do not commit API secret
+server/.env
 
 # Editor directories and files
 .vscode/*

package/templates/src/App.tsx.template

@@ -60,16 +60,11 @@ function App() {
 
         <div className="ai-prompts-section">
           <h2>🤖 Try Asking Your AI Assistant</h2>
-          <p className="prompts-intro">Here are some Cloudinary-related tasks you can try:</p>
+          <p className="prompts-intro">Ping your agent with one of these to get started:</p>
           <ul className="prompts-list">
-            <li>"Add responsive image transformations with breakpoints"</li>
-            <li>"Create a video player component with Cloudinary"</li>
-            <li>"Add image effects like blur, grayscale, or sepia"</li>
-            <li>"Implement automatic image cropping with face detection"</li>
-            <li>"Add image overlays with text or logos"</li>
-            <li>"Create an image gallery with lazy loading"</li>
-            <li>"Add image optimization with format and quality auto"</li>
-            <li>"Implement image transformations based on screen size"</li>
+            <li>Create an image gallery with lazy loading and responsive</li>
+            <li>Create a video player that plays a Cloudinary video</li>
+            <li>Add image overlays with text or logos</li>
           </ul>
         </div>
       </main>

package/templates/src/cloudinary/UploadWidget.tsx.template

@@ -22,24 +22,11 @@ export function UploadWidget({
 }: UploadWidgetProps) {
   const widgetRef = useRef<any>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const clickHandlerRef = useRef<(() => void) | null>(null);
 
   useEffect(() => {
-    // Load Cloudinary Upload Widget script
-    if (!window.cloudinary) {
-      const script = document.createElement('script');
-      script.src = 'https://upload-widget.cloudinary.com/global/all.js';
-      script.async = true;
-      document.body.appendChild(script);
-
-      script.onload = () => {
-        initializeWidget();
-      };
-    } else {
-      initializeWidget();
-    }
-
     function initializeWidget() {
-      if (!window.cloudinary || !buttonRef.current) return;
+      if (typeof window.cloudinary?.createUploadWidget !== 'function' || !buttonRef.current) return;
 
       if (!uploadPreset) {
         console.warn(
@@ -69,16 +56,45 @@ export function UploadWidget({
         }
       );
 
-      buttonRef.current.addEventListener('click', () => {
-        widgetRef.current?.open();
-      });
+      const handler = () => widgetRef.current?.open();
+      clickHandlerRef.current = handler;
+      buttonRef.current.addEventListener('click', handler);
+    }
+
+    function waitThenInit() {
+      if (typeof window.cloudinary?.createUploadWidget === 'function') {
+        initializeWidget();
+        return true;
+      }
+      return false;
+    }
+
+    if (!window.cloudinary) {
+      const script = document.createElement('script');
+      script.src = 'https://upload-widget.cloudinary.com/global/all.js';
+      script.async = true;
+      document.body.appendChild(script);
+      script.onload = () => waitThenInit();
+    } else if (!waitThenInit()) {
+      const poll = setInterval(() => {
+        if (waitThenInit()) {
+          clearInterval(poll);
+          clearTimeout(timeout);
+        }
+      }, 100);
+      const timeout = setTimeout(() => clearInterval(poll), 10000);
+      return () => {
+        clearInterval(poll);
+        clearTimeout(timeout);
+        if (buttonRef.current && clickHandlerRef.current) {
+          buttonRef.current.removeEventListener('click', clickHandlerRef.current);
+        }
+      };
     }
 
     return () => {
-      if (buttonRef.current && widgetRef.current) {
-        buttonRef.current.removeEventListener('click', () => {
-          widgetRef.current?.open();
-        });
+      if (buttonRef.current && clickHandlerRef.current) {
+        buttonRef.current.removeEventListener('click', clickHandlerRef.current);
       }
     };
   }, [onUploadSuccess, onUploadError]);