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:
rpldy/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.
#reactjs #file-upload #hooks #frontend-development #javascript
