advanced-cropper
how to use it with filepond
Nice component, I would like to integrate it with filepond, any suggestions? https://pqina.nl/filepond/docs/api/plugins/image-edit/
@violabg, could you create the basic sandbox with filepond? I will try to find time to integrate with my cropper.
Thanks, This is the CodeSandbox for filepond https://codesandbox.io/s/compassionate-ramanujan-immb8r?file=/src/App.js, Than you need to add the image-edit plugin as per https://pqina.nl/filepond/docs/api/plugins/image-edit/ And make it compatible with your library https://pqina.nl/filepond/docs/api/plugins/image-edit/#integrating-other-editors
@violabg, well, that's the tough task.
The basic integration is not a problem at all, but when you need to deal with the definition of the cropped area you get a huge problem. Ironically, that was the first issue in this library.
The library developer told that:
I've written Doka.js specifically for this use case. The Image Editor plugin is mostly a proxy between FilePond and Doka, while it's possible to integrate your own image cropper/editor it's probably not as cost-effective (of course this depends on your use case) as purchasing a Doka license.
So there are no significant progress after three years.
In short: the root of the issue is the difference between the internal definition of the cropped area in Doka and other croppers (not only mine). Especially, in the defining of the zoom value.
The situation is aggravated by the fact, that the transforming should be duplex.
- You should convert the Doka definition of the cropped area to your format.
- You should convert your format to the Doka definition of the cropped area.
But this story ends well. Try this.
The result should be tested very careful and thoughtful, because my solution is pretty complicated and, frankly, I've never seen that somebody did that before for any other croppers with support of arbitrary rotation.
Also, I use react-mobile-cropper and that should not bother you, because it still react-advanced-cropper, but with batteries included. You can replace it by the default cropper if you want, they have almost identical API.
I did some tests, I had to change something, because I want to open the editor automatically when I choose the image.
I had some troubles with the cancel method, basically we have to add the link.current.onclose(); on it, in order to clean the files, the problem is that it works only the first time, if you cancel or remove a file, the next time you try is not working anymore.
Here is the codesandbox https://codesandbox.io/s/react-advanced-cropper-filepond-forked-uux7uz?file=/src/App.js
@violabg, it's strange. I don't see any troubles. Could you record a video that illustrates your issue?
I saw that you change from onclose() to inclose?.(), but that the source of the problem, onclose become null after the first time, so we can't call it again and filepond can't respond on changes anymore. to test it try to :
- upload an image
- either cancel crop, or remove it after the crop
- you are back to the empty state (which is fine)
- now onclose is null
- upload a new image, crop it and press done
- you get stack we a loading state
https://user-images.githubusercontent.com/9862719/197995108-8f281b27-7ab5-4190-a1bf-527f24a3c1dd.mp4
@violabg, what's wrong?
for me is different, but is not a constant, some time you need to repeat the steps in order to see it
@violabg, could you upload a video? If you use Windows you can use ScreenToGif (free / open source).
https://user-images.githubusercontent.com/3963176/198023446-734269e6-835d-4ecd-af93-690334e9ba47.mp4
@violabg, I don't get why I can't reproduce that bug. Do you have any bugs with imageEditInstantEdit={false}?
[submit] [before] onclose undefined [cancel] oncancel ▶ƒ () {} [submit] [after] onclose ▶ƒ () {}
this is a new codesandbox
https://codesandbox.io/s/react-advanced-cropper-filepond-forked-uux7uz?file=/src/App.js
as you can see the first file is fine, if you add a second, it get stuck on a loading state, I think the problem is onclose fn that is null the second time, but can't figure it out why. Maybe we should move the conversation on the filepond repository
[submit] [before] onclose undefined [cancel] oncancel ▶ƒ () {} [submit] [after] onclose ▶ƒ () {}
That's totally correct. But the problem appears not on cancel, but on submit. Try to reproduce the bug, that you have illustrated on the video before, in this sandbox and send me the full console content.
Maybe we should move the conversation on the filepond repository
I'm not sure that we will receive the answer soon, and I don't see any mistakes in his source code also. First of all, I need to understand the nature of the issue.
@violabg, what's browser do you use? Could you try it on device with another operating system?
@violabg, could you to reproduce the bug here?
Hm, I've sent the wrong link. The right one.
is working, but you are right, is browser related, I was using safari, I tried on Chrome and is working.
@violabg, well, that's something.
Try to reproduce the bug, that you have illustrated on the video before, in this sandbox and send me the full console content. I assume, that somehow line after [submit] [after] onclose is not called.
https://user-images.githubusercontent.com/3963176/198281092-4a120210-2749-4f8d-af5a-9e378e0ed46f.mp4
[submit] [before] onclose undefined [submit] onconfirm ▶ƒ () {} [submit] [after] onclose ▶ƒ () {}
[submit] [before] onclose null [submit] onconfirm ▶ƒ () {} [submit] [after] onclose ▶ƒ () {}