I am using the react-cropper npm package, to crop an image on upload. The uploaded images are in jpeg, jpg, and png format. After the image is cropped, I receive the image in BASE64 format. When I try to send the image to the backend, I receive an error message as below. {error: "Bad Request" message: "Field value too long" statusCode: 400}

Is there a way to either reduce the URI or any other options? Actually stuck with this for too long and was unable to identify a solution.

const handleUpload = async (uri) => {
    const myHeaders = new Headers();
    myHeaders.append('Authorization', `Bearer ${appRef.get('X-AUTH-TOKEN')}`);

    const formdata = new FormData();
    formdata.append('file', uri);
    formdata.append('type', 'base64');

    const requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: formdata,
      redirect: 'follow',
    };

    fetch(`https://prod-main.com/nj/file-upload`, requestOptions)
      .then(response => response.text())
      .then(result => console.log(result))
      .catch(error => console.log('error', error));
  };

Have attached a sandbox link that contains a file named base64Image where the URI received is added. https://codesandbox.io/s/epic-ives-9eqpce?file=/base64Image