CldUploadButton not loading, stuck on spinning loader
Hi
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}>
<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
Answers
-
Hi @Mipo,
I have tested your code and it works for me even though there is an error on the
onchangecallback.Can you make sure you have added the
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAMEvariable as a secret with yourcloud_namevalue? Can you make sure thatmy_unsigned_presetdoes exist in your account?If you open the debugger on replit? Do you have any errors?
Thanks,
Loic
0 -
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?
0 -
Hi @Mipo
I actually managed to reproduce it on replit.
Basically, my
secretswas empty and I added thecloud_namewhile the app was still running. When doing so, theuploadbutton 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
0 -
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.
1
