Adding Crop to Image Upload in React

Yoav Niran
The Startup
Published in
3 min readJul 8, 2020

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:

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


We’ll see how its implemented next.

Yoav Niran
The Startup

I write. Code by day, science fiction by night. Check out my first novel at: