Scrolling is block after uploading image

juddin0801

Hi,

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: https://prnt.sc/-wXT5W7V09FW

There is no scroll bar after uploading image: https://prnt.sc/b50g-snUlJuF

How to solve this?

Regards,

Tamara

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. 

Best,

Tamara

juddin0801

Please check my codes

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

                {logoUrl ? (

                  <CldImage

                    src={logoUrl}

                    alt='Invoice Logo'

                    width={160}

                    height={128}

                  />

                ) : (

                  <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' />

                      <CldUploadButton

                        uploadPreset='examplePreset'

                        onUpload={(data) => {

                          setLogoUrl(data.info.secure_url);

                          //console.log(data.info.secure_url);

                        }}

                        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)

                      </p>

                    </div>

                  </label>

                )}

                {logoUrl && (

                  <button

                    type='button'

                    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>

                  </button>

                )}

              </div>

DannyFromCloudinary

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,

-Danny

juddin0801

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

Tom

Hi @juddin0801,

Thanks for the reply.

I would recommend opening an issue on their GitHub as per https://www.npmjs.com/package/next-cloudinary#%EF%B8%8F-community--support

Thomas