CldUploadButton not loading, stuck on spinning loader

Mipo Member Posts: 3
edited September 28 in Developer APIs


I have issue with my nextjs app, the CldUploadButton does not show the upload options, just shows the loading spinner.

I tried to create a simple test app but the result is the same, there is no errors in console or logs. What could be causing this?

This is my code:

import type { NextPage } from 'next'

import Head from 'next/head'

import Image from 'next/image'

import styles from '../styles/Home.module.css'

import { CldUploadButton } from "next-cloudinary";

const Home: NextPage = () => {

 return (

   <div className={styles.container}>


       <link rel="icon" href="/favicon.ico" />


     <main className={styles.main}>

   <CldUploadButton options={{ maxFiles: 1 }} onUpload={(result: any) => onChange(} uploadPreset="my_unsigned_preset">

















           <div className="relative h-40 w-40">









export default Home



  • Vdeub
    Vdeub Member, Cloudinary Staff Posts: 37

    Hi @Mipo,

    I have tested your code and it works for me even though there is an error on the onchange callback.

    Can you make sure you have added the NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME variable as a secret with your cloud_name value? Can you make sure that my_unsigned_preset does exist in your account?

    If you open the debugger on replit? Do you have any errors?



  • Mipo
    Mipo Member Posts: 3

    I forgot the CLOUDINARY_CLOUD_NAME, after I added that it started working. Also took away the onchange callback.

    I copied the code and deployed into I added the secret and the unsigned_preset is correct. It doesn't load the widget on, you can access the web page here:

    There is no errors on console, what can I check next?

  • Vdeub
    Vdeub Member, Cloudinary Staff Posts: 37

    Hi @Mipo

    I actually managed to reproduce it on replit.

    Basically, my secrets was empty and I added the cloud_name while the app was still running. When doing so, the upload button appears but when clicking on it, you effectively have an infinite load.

    If you stop the app and re-run it, it will work.

    Can you check if you have the same kind of thing on At the end of the day, the code works so it must be something like that.



  • Mipo
    Mipo Member Posts: 3

    I figured it out, I had to put the cloud_name env variable in to my Docker file when deployed to, so it was available at the browser also.

    Thank you for your help.

  • Vdeub
    Vdeub Member, Cloudinary Staff Posts: 37

    Hi @Mipo,

    That's awesome :)

    Glad you find the right configuration for