Cropping and resizing images on Upload in your React app
I wanted my users to be able to upload profile pictures that would then be saved in an AWS S3 bucket. I am going to assume you already have a working photo upload functionality. Setting up node.js to upload images to AWS as well as integrating it with React frontend is a topic for a whole different post, and there are countless resources out there that can help you do it. I trust you are proficient with google and can find the rest.
As with any programming problem, there are a million ways to achieve this outcome with various tradeoffs. One of my favourite approaches find link below —
a) https://codeburst.io/react-image-upload-with-kittens-cc96430eaece
- Here is the Main Component
2 ) Here is the ProfileUpload component responsible for profile picture upload:
3) Open a popup modal box and call the ImageResizer component to crop an image
4)I first went ahead and added ‘react-image-crop’ to my application and updated the package.json file with.
You also need to include either dist/ReactCrop.css or ReactCrop.scss.
I will not go into details on how to use the ‘react-image-crop’ package, and I do recommend reading the official guide if you would like to know more:
5) constants file
Now, I know it’s a lot of code, but I truly hope it will be helpful to someone who is building a similar feature and maybe saves them some time!