Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Calculator

0

96
Views
How to reduce received Base64 string after cropping an image?

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

7 months ago · Santiago Trujillo
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2023 PeakU Inc. All Rights Reserved.