Home > OS >  How can I get cropped Image to upload ? | React
How can I get cropped Image to upload ? | React

Time:12-25

I want user to upload and crop image for their profile image. I user react-cropper react-cropper and getting cropped Image URL. But I am not sure how to get cropped image file so I can upload to server.

here is link

https://codesandbox.io/s/crazy-wu-8z13i?file=/src/Demo.tsx:62-75

CodePudding user response:

React-cropper gives you a Base64 URL of the image.

We can convert this URL to a File object, as I have demonstrated in this Codesandbox.

As explained in the comments in that Codesandbox, once you have the File, we can upload the file to S3 or anywhere else you like.

If you want to send this file to a Node.js server, you can use Multer with your Express server to create an /upload route. Here's a guide on that.

Hope this helped. :)

  • Related