Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to scroll after successful upload #10

Open
r4881t opened this issue Jan 31, 2022 · 2 comments
Open

Unable to scroll after successful upload #10

r4881t opened this issue Jan 31, 2022 · 2 comments
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@r4881t
Copy link

r4881t commented Jan 31, 2022

  1. I'm using "react-cloudinary-upload-widget": "^1.4.4",
  2. I added the widget in my page. Code goes below
<Widget

                            resourceType={'auto'} // optionally set with 'auto', 'image', 'video' or 'raw' -> default = 'auto'
                            cloudName={'dn'} // your cloudinary account cloud name.
                            // Located on https://cloudinary.com/console/
                            uploadPreset={'etqcmjok'} // check that an upload preset exists and check mode is signed or unisgned
                            buttonText={'Choose File'} // default 'Upload Files'
                            style={{
                                  color: 'white',
                                  border: 'none',
                                  width: '120px',
                                  backgroundColor: 'rgb(3 105 161)',
                                  borderRadius: '4px',
                                  height: '28px'
                                }} // inline styling only or style id='cloudinary_upload_button'
                            folder={'nsjdh-dev'}
                            cropping={false} // set ability to crop images -> default = true
                            // https://support.cloudinary.com/hc/en-us/articles/203062071-How-to-crop-images-via-the-Upload-Widget-#:~:text=Click%20on%20the%20%22Edit%22%20link,OK%22%20and%20Save%20the%20changes.
                            // more information here on cropping. Coordinates are returned or upload preset needs changing
                            multiple={false} // set to false as default. Allows multiple file uploading
                            // will only allow 1 file to be uploaded if cropping set to true
                            autoClose={true} // will close the widget after success. Default true
                            onSuccess={successCallBack} // add success callback -> returns result
                            onFailure={failureCallBack} // add failure callback -> returns 'response.error' + 'response.result'
                            logging={false} // logs will be provided for success and failure messages,
                            // set to false for production -> default = true
                            customPublicId={'sample'} // set a specific custom public_id.
                            // To use the file name as the public_id use 'use_filename={true}' parameter
                            //  eager={'w_400,h_300,c_pad|w_260,h_200,c_crop'} // add eager transformations -> deafult = null
                            use_filename={false} // tell Cloudinary to use the original name of the uploaded
                            // file as its public ID -> default = true,

                            widgetStyles={{
                              palette: {
                                window: '#737373',
                                windowBorder: '#FFFFFF',
                                tabIcon: '#FF9600',
                                menuIcons: '#D7D7D8',
                                textDark: '#DEDEDE',
                                textLight: '#FFFFFF',
                                link: '#0078FF',
                                action: '#FF620C',
                                inactiveTabIcon: '#B3B3B3',
                                error: '#F44235',
                                inProgress: '#0078FF',
                                complete: '#20B832',
                                sourceBg: '#909090'
                              },
                              fonts: {
                                default: null,
                                "'Fira Sans', sans-serif": {
                                  url: 'https://fonts.googleapis.com/css?family=Fira+Sans',
                                  active: true
                                }
                              }
                            }} // ability to customise the style of the widget uploader
                            destroy={true} // will destroy the widget on completion


                            // 👇 FOR SIGNED UPLOADS ONLY 👇

                            // generateSignatureUrl={'http://localhost:8080/generate_signature/'} // pass the api
                            // // endpoint for generating a signature -> check cloudinary docs and SDK's for signing uploads
                            // apiKey="MY_API_KEY" // cloudinary API key -> number format
                            // accepts={'application/json'} // for signed uploads only -> default = 'application/json'
                            // contentType={'application/json'} // for signed uploads only -> default = 'application/json'
                            // withCredentials={true} // default = true -> check axios documentation for more information
                            // unique_filename={true} // setting it to false, you can tell Cloudinary not to attempt to make
                            // // the Public ID unique, and just use the normalized file name -> default = true

                          />
  1. When the widget successfully uploads the file, I am unable to scroll (for some weird reason).

Any help? Thanks.

@r4881t
Copy link
Author

r4881t commented Jan 31, 2022

After some play, I found that if I set destroy={false} and let the user close the window, it works okay. The setting of autoClose has no impact on this behaviour.

@bubbaspaarx
Copy link
Owner

I'm unable to recreate this issue. Have you got an example (jsfiddle, codepen etc) where you can demonstrate this.
The only thing that destroy does is remove the widget iframe entirely.

@bubbaspaarx bubbaspaarx added bug Something isn't working good first issue Good for newcomers labels Jan 31, 2022
Ekaji added a commit to Ekaji/react-cloudinary-upload-widget that referenced this issue Oct 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants