The solution discussed in this article is based on react-uploady:
Modern file-upload components & hooks for React. React-Uploady is a lightweight library - enabling you to build…
One of Uploady’s guiding principals is that it should be easy to mix and match packages as needed. In this case, we’ll do just that - take a few packages and combine them to get the outcome we want:
- uploady as our uploader provider
- upload-button to initiate the upload
- upload-preview to load the preview for the crop
Cropping UI is provided by react-image-crop. A popular 3rd party for just this use-case.
In the code above, we use different components from Uploady to render an upload button and the preview component. Once an upload begins, the preview will be displayed automatically.
We pass a custom PreviewComponent for the preview
We’ll see how its implemented next.