CODEWITHSUNDEEP
reactjsnext.jscloudinarynext.js13
Louis Marie
Louis Marie

Reputation: 9

CldUploadWidget produces overlay that has an infinite loading spinner

I am trying to use CldUploadWidget of the next-cloudinary package in nextjs13 using the app router. The idea is upload an image and retrieve the public_id and the url but after setting up, when I click on the button that opens the overlay it opens but I only see a loading spinner that spins infinitely. The only error/issue I see on the browser (Chrome latest) is the below image:

error on chrome

I have also tested on Safari and I get the same output.

below is my code:

"use client";
import Image from "next/image";
import React, { ChangeEvent, useState } from "react";
import styles from "./ImageUpload.module.css";
import { CldUploadWidget } from "next-cloudinary";
import { UploadApiResponse } from "cloudinary";

const ImageUpload = () => {
  const [selectedImage, setSelectedImage] = useState<File | null>(null);
  const sigApiRoute = `${process.env.NEXT_PUBLIC_API_BASE_URL}/uploads/signature`;

  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files && event.target.files[0];
    if (file) {
      // console.log("File: ", file);
      setSelectedImage(file);
    }
  };

  const onUpload = (response: UploadApiResponse) => {
    console.log(response);
  };

  //   signatureEndpoint={sigApiRoute}
  return (
    <CldUploadWidget uploadPreset="<Upload Preset>">
      {({ open }) => {
        function handleOnClick(
          e: React.MouseEvent<HTMLButtonElement, MouseEvent>
        ) {
          e.preventDefault();
          open();
        }
        return (
          <button className="button" onClick={handleOnClick}>
            Upload an Image
          </button>
        );
      }}
    </CldUploadWidget>
  );
};

export default ImageUpload;

This is the output: enter image description here

Upvotes: 0

Views: 546

Answers (2)

AYANOKOJI-KUN
AYANOKOJI-KUN

Reputation: 11


    const nextConfig = {
    

    images: {
            remotePatterns: [
            {
                 protocol: 'https',
                 hostname: 'res.cloudinary.com',
             },
         ],
        },
    }

Add this in your next.config.js file and you are done

Upvotes: 1

Mammadreza.T
Mammadreza.T

Reputation: 1

I had the same issue but the problem was really funny! the Environment variable was not written correctly and the variable had some misspelled words instead of

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME='';

and that causes the Cloudinary widget to not recognize the cloud name.

Upvotes: 0

Related Questions