skip to Main Content

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?

2

Answers


  1. If I’m not completely mistaken, the docs describes a filetype property which accepts a String. Valid property values are "PDF, GIF, PNG, JPG, TIF, BMP".

    Based on that information, I’d suggest to change your current code to:

    // ... elided irrelevant code ...
    const data = {
      apikey: 'SECRET',
      base64Image: jpg,
      filetype: 'JPG' // <-- added this line
    };
    // ... elided irrelevant code ...
    
    Login or Signup to reply.
  2. 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 };
      }
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search