POST upload file with XHR FormData

This example uses the Optical Character Recognition (OCR) API from IDOL OnDemand. For details see here: https://www.idolondemand.com/developer/apis/ocrdocument#overview

by Remko de Knikker

HTML

<b>Code example - IDOL OnDemand OCR api.</b><br>
<i>for blogpost go <a href="http://bit.ly/1rF3Crm" target="_blank">here</a></i><br>
POST upload file with XHR FormData.<br>
<br>
Select an image with horizontal layout to extract text from, see example image.<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select file: <input type="file" id="input1" /><br>
<br>
<input type="button" value="send" id="button1"><br>
<br>
<div id="output"></div>     
<div>Example image:</div>
<div><img src="https://community.idolondemand.com/t5/image/serverpage/image-id/126iA4783334F2EB1CA0/image-size/medium?v=mpbl-1&px=-1"> </div>
<div>OCR example response:</div>    
<div style="background-color: lightgray;">
First Lastname<br>
Title goes here<br>
Title 2 goes here<br>
[email protected]<br>
T +1 000000 0000 0 +1 0000000000 @<br>
M +1 000 000 0000 T +1 000 000 0000<br>
Hewlett-Packard Company<br>
1216 Presidents Way<br>
Huntsville, AL 35803<br>
USA Registered No.<br>
12345 USA<br>
Extended registered<br>
hp.com linegoeshere  <br>  
</div>

JavaScript

var apikey = "your-apikey-idolondemand.com";
var postocrurl = "https://api.idolondemand.com/1/api/sync/ocrdocument/v1";

$('#button1').click( function() {
   fnCall();  
});

var out = document.getElementById("output");

function fnCall(){	
    out.innerHTML = "1";
    
    var filesList1 = document.getElementById("input1");
	var file1 = filesList1.files[0];
    if(!file1){
        alert('You must select a file.');
        return false;
    }
    
    var fd = new FormData();
	fd.append("apikey", apikey);  
    fd.append("file", file1);
    // optional to improve results from 'scene photos'
    // sometimes depending on the quality of the image
    // you need to turn this on for improved results
    //fd.append("mode", "scene_photo");
    
	xhr = new XMLHttpRequest();
	xhr.open('POST', postocrurl, true);	
    xhr.onreadystatechange = function(){
        out.innerHTML = "onreadystatechange...";
        var r = fnReady();	
    };
    xhr.onload = function(){ };
    
    out.innerHTML = "Waiting for response...<br><br>";
	xhr.send(fd);     
    
}

function fnReady() {
  if (xhr.readyState === 4)
  {
	out.innerHTML += "<br>status: "+xhr.status+": "+xhr.statusText+"<br>";
    var r = xhr.responseText;
    if(r){
        out.innerHTML += "responseText:<br>"+r+"<br><br>";
		var json = JSON.parse(r);
		var text_block = json.text_block;
		if(text_block){
			$(text_block).each(function(i) {
				var txt = text_block[i].text;
				text = replaceAll(txt, "\n", "<br>");
				out.innerHTML += "responseHtml: "+"<div style=\"background-color:lightgray;\">"+text+"</div><br>";
			});
		}
	}else{
		out.innerHTML += "Error: no response.<br>";
	}
  }else{
      out.innerHTML = "xhr.readyState: "+xhr.readyState;
  }
}

function replaceAll(string, find, replace) {
  return string.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function escapeRegExp(string) {
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}