Adding Crop to Image Upload in React
--
In this post I’ll show how you can add crop UI for images before your user uploads them to a server.
The full code sample can be found in this sandbox:
The solution discussed in this article is based on react-uploady:
Of which I’ve written about before (intro post, preview&progress post).
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
Note: uploady can be interchanged with chunked-uploady or tus-uploady when chunked uploads are required (and supported) or when resumable uploads are, respectively.
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
<UploadPreview
PreviewComponent={ItemPreviewWithCrop}
...We’ll see how its implemented next.
