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