Scrolling is block after uploading image

juddin0801
juddin0801 Member Posts: 3
edited February 20 in Developer APIs

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,

Tagged:

Answers

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 74

    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
    juddin0801 Member Posts: 3

    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
    DannyFromCloudinary Member, Cloudinary Staff Posts: 80

    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
    juddin0801 Member Posts: 3

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

  • Tom
    Tom Member, Cloudinary Staff Posts: 45

    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