Provide example combining react-easy-crop with react-uploady

[musicformellons]

I try to combine these two and run into problems. As react-easy-crop is quite popular (and provides dragging of the picture, instead of dragging the cropselection) such an example might be worthwhile. Here is more info on the problems I run into, including a codesandbox.

[yoavniran]

Hey @musicformellons, I provided an answer with a working adaption (csb) over on stackoverflow.
Turning this into a discussion for others to find in the future.

Hope it helps

[musicformellons]

Really nice! Thank you very much for your quick help! I made the cropimage.js more in line with the 'original' and without the unnecessary rotation operations etc.

As my next requirement would be to have the image-crop be part of a form with validation I tried to combine it with the uploady form example, but I do not know how to trigger onUploadCrop from the form Submit button as they are part of different components. Also how to reference values to 'enable/disable' the submit button are unclear to me.

What I have is this:
https://codesandbox.io/s/react-uploady-crop-and-upload-with-react-easy-crop-within-a-form-it114?file=/src/App.js

It should work as follows:

• submit button is disabled as form is invalid.
• press 'select file'
• selecting image, then it will show and can be cropped (or cancelled after which other image can be selected)
• other form fields should be filled
• press submit (which is 'enabled'): (validation then) 'onUploadCrop' will be triggered and cropped preview shown, other fields also uploaded.

Could you have a look maybe and suggest how to go about this?

[yoavniran]

This is a very interesting use-case. I will try and find time in the next few days to come up with an example.

Without coding, I think it isnt trivial and may require a different approach. For example:

• showing the crop based on a different event (batch-add)
• using autoUpload=false to prevent the file from starting to upload immediately.
• save the crop result in some state
• replace the file with the cropped file using the useRequestPreSend

[musicformellons]

That would be great as I am still stuck on this!

[musicformellons]

I hope this is still on your todo-list?!

[yoavniran]

@musicformellons will try and get to it in the next few days 🤞

[yoavniran]

@musicformellons didnt forget about you. You should be able to follow the code in this sandbox to get an example of cropping an image that will be uploaded as part of a form. Its simplified, of course, but should definitely help you get it working the way you need it.

2022-02-14_17-29-14.mp4

[musicformellons]

@yoavniran Nice! Are you sure you send the right codesandbox, as it does not correspond to the .mp4 you attached (and the cropper in it does not work)?

[yoavniran]

not sure what you mean. Its the same sandbox and it works for me in multiple browsers...

[musicformellons]

Oops, yeah, it's fine. Will see whether I can turn it into the cropper I use! Thanks!