ReactJS: Resize image before upload

Question

In my reactJs project, I need to resize image before uploading it.

I am using react-image-file-resizer library which has a simple example but not working for me.

I have tried this but its shows me blank result. What am I doing wrong?

var imageURI = '';
const resizedImg = await Resizer.imageFileResizer(
  fileList.fileList[0].originFileObj,
  300,
  300,
  'JPEG',
  100,
  0,
  uri  => {
    imageURI = uri 
    console.log(uri )  // this show the correct result I want but outside of this function
  },
  'blob'
);
console.log(resizedImg)
console.log(imageURI)

// upload new image
...uploading image here.. 

If I do imgRef.put(uri); inside URI function then image upload works. but I need to do that outside of that function.

how to get result in imageURI variable and reuse it later ?

Answer 1

First, wrap this resizer:

const resizeFile = (file) => new Promise(resolve => {
    Resizer.imageFileResizer(file, 300, 300, 'JPEG', 100, 0,
    uri => {
      resolve(uri);
    }, 'base64' );
});

And then use it in your async function:

const onChange = async (event) => {
  const file = event.target.files[0];
  const image = await resizeFile(file);
  console.log(image);
}