Scrolling is block after uploading image

juddin0801 Member Posts: 3
edited February 20 in Developer APIs


After uploading image, scrolling is totally block, cant navigate to the bottom to top or top to bottom on the page for the other field on the form to edit something.

There is a scroll bar before uploading image:

There is no scroll bar after uploading image:

How to solve this?




  • Tamara
    Tamara Member, Cloudinary Staff Posts: 106

    Hi there,

    From looking at the logs of the upload of this specific file I don't see anything suspicious.

    Please ensure that there are no JavaScript conflicts on your page that might interfere with the default scroll behavior. You can also open the browser console and look for any error messages or warnings that might be related to the scrolling issue.

    If you can't figure it out on your own, can I please ask you to provide more details about the problem you're encountering?

    Please confirm which version of our SDK you're using, as well as: 

    • A sample of your code
    • The value you're passing as parameters (for example, the transformation options)
    • The error stack trace from your code, or the exact error message you see returned by our API

    If you don't want to share this info publicly, you can open a new private support ticket here



  • juddin0801
    juddin0801 Member Posts: 3

    Please check my codes

    <div className='items-center justify-center mb-6'>

                    {logoUrl ? (



                        alt='Invoice Logo'




                    ) : (

                      <label className='p-4 flex flex-col items-center justify-center h-32 w-40 rounded-lg cursor-pointer bg-slate-800 bg-opacity-50 border-2 border-dashed border-slate-700'>

                        <div className='flex flex-col items-center justify-center pt-5 pb-6'>

                          <RiUploadCloud2Fill className='w-12 h-10 text-yellow-400' />



                            onUpload={(data) => {




                            className='mb-4 text-center text-xs text-gray-300 font-semibold'


                          <p className='text-xs text-gray-400 text-center'>

                            PNG or JPG <br /> (MAX. 240x240px)





                    {logoUrl && (



                        onClick={() => setLogoUrl('')}

                        className='mt-4 bg-slate-900 bg-opacity-60 text-slate-300 px-6 py-2 rounded-md text-sm font-semibold flex items-center justify-center gap-1'>

                        <MdPublishedWithChanges className='text-xl text-yellow-400' />

                        <span>Change Logo</span>




  • DannyFromCloudinary
    DannyFromCloudinary Member, Cloudinary Staff Posts: 107

    Hi @juddin0801 .

    CldUploadButton is actually functionality from the next-cloudinary package, which is actually a community-built library, not one that we have released ourselves. As such, I'm afraid we're not able to provide support for it. Instead, I would suggest using one of the links in the Community & Support section of the next-cloudinary entry on npm.

    Please let me know if there is anything we can do to help further.

    Kind regards,


  • juddin0801
    juddin0801 Member Posts: 3

    So what is your solution to use in my next js project

  • Tom
    Tom Member, Cloudinary Staff Posts: 78

    Hi @juddin0801,

    Thanks for the reply.

    I would recommend opening an issue on their GitHub as per