OCR.space error 99 in javascript POST request using base64

I am using the free OCR.space api for my website, and using the base64Image for uploading the image (received from a jpg-only file input in the html file), and got this error:

{"OCRExitCode":99,"IsErroredOnProcessing":true,"ErrorMessage":["Unable to recognize the file type","E216:Unable to detect the file extension, or the file extension is incorrect, and no 'file type' provided in request. Please provide a file with a proper content type or extension, or provide a file type in the request to manually set the file extension."],"ProcessingTimeInMilliseconds":"0"}

My code is:

async function OCR(jpg) {
  const url = 'https://api.ocr.space/parse/image';
  const data = {
    apikey: 'SECRET',
    base64Image: jpg,
  };
  const options = {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  };

  try {
    const response = await fetch(url, options);
    const json = await response.json();
    return json;
  } catch (error) {
    console.error(error);
    return { error: true };
  }
}

And my base64 encoding function is:

function toBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

So I run: await OCR(await toBase64(/*HTML INPUT HERE*/))

I understand what the error is, but I can't seem to find documentation about how to add a file type, how would I do this?

Solution

Marley, I totally get how you had trouble getting this to work. The API documentation is not very well written in my opinion.

I spent a while trying to figure out why perfectly good base64 encoded images were failing.

I finally found an aside comment in their description for sending URL's that indicate for URL's you need to use multipart form data. They sure do not mention that for sending base64, but I gave it a try and that fixed the problem!

So if you change your OCR() function to create and send FormData, you should be all set.

Here is an example of how to do that:

async function OCR(jpg) {
  const url = 'https://api.ocr.space/parse/image';
  let data = new FormData( )
  data.set( "base64Image", jpg )
  data.set( "apikey", 'xxxxxxxxxx' )

  try {
    const response = await fetch(url, {method: 'POST', body: data});
    const json = await response.json();
    return json;
  } catch (error) {
    console.error(error);
    return { error: true };
  }
}