The version 10.1.8 has issue with onLoad function

sekoyo / react-image-crop

A responsive image cropping tool for React

ISC License

3.85k stars 344 forks source link

The version 10.1.8 has issue with onLoad function #560

Closed farhapartex closed 1 year ago

farhapartex commented 1 year ago

The version 10.1.8 is unable to make the preview of cropped image. The example code doesn't show how to do download. Also the example here https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-0h4db?file=/src/App.js:2697-3076 doesn't work properly with the version 10.1.8 I moved to version 9.0.4 with works fine as like the example.

sekoyo commented 1 year ago

When you say doesn't work what do you mean? I just tried https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o?file=/src/App.tsx in Chrome 116 and it downloaded fine

farhapartex commented 1 year ago

The example in the sandbox works fine, please read below points:

The version I installed in my react app was: 10.1.8
This version only show the uploaded image if I use img tag inside of ReactCorp but if I use only ReactCorp like the sandbox, the image doesn't come up
The Github repo has example with img tag, but sandbox example is without img tag
with the version: 10.1.8 if I crop image, the canvas is None, so nothing happened
To make sure, I did copy & paste the sandbox example in my react app and still didn't work
I removed the version 10.1.8 and installed again 9.0.4 and the sandbox code which I copied works fine & it's now running propely

sekoyo commented 1 year ago

This sounds like an issue with how you set things up but hard to say without seeing code. In v10 <img> goes inside the component and onLoad is not a prop on the library but standard onLoad on the image like in the sandbox:

Screenshot 2023-09-21 at 12 38 03 PM

Anyway glad you got it working in v9

farhapartex commented 1 year ago

Thanks for letting me know. Is it possible to update the repo readme file?

sekoyo commented 1 year ago

Thanks for letting me know. Is it possible to update the repo readme file?

I'm not sure which part of the readme you are referring to?

farhapartex commented 1 year ago

Developer need to use onLoad in img tag, isn't mentioned in the readme file. So I found others like me having the same issue. So they are trying to implement based on readme file and the sandbox, but example are not matching. So I asked to add additional example on using of img tag with different callback function like the screenshot you attached above. hope you got it now

sekoyo commented 1 year ago

onLoad isn't mentioned anywhere in the readme docs except here:

Screenshot 2023-09-21 at 2 15 06 PM

there is an example of using onLoad on the image in the sandbox as well (on the image which is the correct way). So not sure what you mean.

There is a FAQ about an image preview which links to the codesandbox here:

Screenshot 2023-09-21 at 2 17 02 PM

farhapartex commented 1 year ago

could you please try the same code which is in CodeSandbox with the version 10.1.18 I think you will understand.

Thank you for the kind support.

sekoyo commented 1 year ago

The codesandbox linked to in the readme (https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o) is using 10.1.8

farhapartex commented 1 year ago

I was looking this doc: https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-0h4db?file=/src/App.js:2697-3076

sekoyo commented 1 year ago

Ok I think I know what you mean - the v9 readme here https://github.com/DominicTobias/react-image-crop/tree/9.1.1 the hooks sandbox is linking to v10 instead of https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-0h4db