CldUploadButton not loading, stuck on spinning loader

Mipo
Mipo Member Posts: 3 ✭
edited September 2023 in Developer APIs

Hi

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

widget_error.png


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}>

     <Head>

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

     </Head>

     <main className={styles.main}>

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

         <div

           className="

           p-4

           border-4

           border-dashed

           border-primary/10

           rounded-lg

           hover:opacity-75

           transition

           flex

           flex-col

           space-y-2

           items-center

           justify-center

         "

         >

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

             upload

           </div>

         </div>

       </CldUploadButton>

     </main> 

   </div>

 )

}


export default Home

Tagged:

Answers

  • Vdeub
    Vdeub Member, Cloudinary Staff Posts: 78

    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?

    Thanks,

    Loic

  • 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 fly.io. I added the secret and the unsigned_preset is correct. It doesn't load the widget on fly.io, you can access the web page here: https://nextjs-cloudinary-widget-test.fly.dev/

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

  • Vdeub
    Vdeub Member, Cloudinary Staff Posts: 78

    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 fly.io? At the end of the day, the code works so it must be something like that.

    Regards,

    Loic

  • 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 fly.io, so it was available at the browser also.

    Thank you for your help.

  • Vdeub
    Vdeub Member, Cloudinary Staff Posts: 78

    Hi @Mipo,

    That's awesome :)

    Glad you find the right configuration for fly.io.

    Regards,

    Loic

Categories