Implement OCR with React#1
Tags: beginners, tutorial, opensource, react
Published: 2020-10-13 15:10:20

# What is OCR?
According to Wikipedia, **Optical character recognition** or **optical character reader** is the electronic or mechanical conversion of images of typed, handwritten or printed text into machine-encoded text, whether from a scanned document, a photo of a document, a scene-photo or from subtitle text superimposed on an image. You can read the full article [Here](https://en.wikipedia.org/wiki/Optical_character_recognition).

Today we are going to Implement Optical Character Recogniton using [React](https://reactjs.org) and [Tesseract.js](https://tesseract.projectnaptha.com).

This article is divided in two parts. This is the  **part 1** , for the **Part2** click [**here**](https://dev.to/honorezemagho/implement-ocr-with-react-2-li)

# Requirements
- [Nodejs](https://nodejs.org/) version **8.10** or Higher.

# Installation

Using [create-react-app](https://create-react-app.dev/docs/getting-started) we are going to generate a new react project.

``````npx create-react-app react-ocr
cd react-ocr
npm start``````

For the user interface, we are going to use [Bootstrap](https://getbootstrap.com) and to add upload we are going to use [**React Dropzone Uploader**](https://react-dropzone-uploader.js.org/).

```
npm install --save bootstrap react-dropzone-uploader
```

and add import styles it in `src/index.js` file

```
import 'bootstrap/dist/css/bootstrap.css';
import 'react-dropzone-uploader/dist/styles.css';
```

We are going now in `src/App.js` to, import **Dropzone** component at the top 
```
import Dropzone from 'react-dropzone-uploader';
``` 
and replace  **App** class like this to have some basic user interface:

``````
function App ()  {
  render() {
    return (
     <React.Fragment>

      <nav className = "navbar navbar-light bg-light justify-content-center mt-3">
            <a className = "navbar-brand" href = "/" > React OCR </a><br/>
            <p> Optical Character Recognition with React and Tesseract.js </p> 
        </nav>
        <Dropzone 
        accept = "image/jpeg, image/png, image/jpg"
        inputContent = {
            (files,extra) => (extra.reject ? 'Only PNG and JPG Image files are allowed' : 'Drop  image here')
        }
        styles = {
            {
                dropzoneActive: {
                    borderColor: 'green'
                },
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                    inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),
            }
        }
        />
</React.Fragment>
    )
  }
};
``````
It looks like this.
![basic-ui](https://dev-to-uploads.s3.amazonaws.com/i/behr31s6ct43ljzd06xo.png)
 

We are going now to integrate upload functionnality using **react-dropzone-uploader** package that we install before by adding using **getUploadParams, onChangeStatus, maxFiles, multiple,canCancel** properties.
For storage, we are going to use [HttpBin](https://httpbin.org)

After adding it our function looks like this:
``````
import React from 'react';
import './App.css';
import Dropzone from 'react-dropzone-uploader';


function App () {

 const getUploadParams = () => {
    return {
        url: 'https://httpbin.org/post'
    }
}

 const handleChangeStatus = ({
    meta
}, status) => {
    if (status === 'headers_received') {
      alert("Uploaded")
    } else if (status === 'aborted') {
      alert("Something went wrong")
    }
}


    return (
      <React.Fragment >

        <nav className = "navbar navbar-light bg-light justify-content-center mt-3">
            <a className = "navbar-brand" href = "/" > React OCR </a><br/>
            <p> Optical Character Recognition with React and Tesseract.js </p> 
        </nav>


        <Dropzone 
        getUploadParams = {
         getUploadParams
      }
      onChangeStatus = {
          handleChangeStatus
      }
      maxFiles = {
          1
      }
      multiple = {
          false
      }
      canCancel = {
          false
      }
       accept = "image/jpeg, image/png, image/jpg"
        inputContent = {
            (files,extra) => (extra.reject ? 'Only PNG and JPG Image files are allowed' : 'Drop  image here')
        }
        styles = {
            {
                dropzoneActive: {
                    borderColor: 'green'
                },
                dropzoneReject: { borderColor: 'red', backgroundColor: '#DAA' },
                    inputLabel: (files, extra) => (extra.reject ? { color: 'red' } : {}),
            }
        }
        /> 

</React.Fragment>
    )
};

export default App;

``````
Now we have successfully add **upload functionnality**.
![upload-func](https://dev-to-uploads.s3.amazonaws.com/i/l2axhtmfilkvdgpbmrx9.png)

This article is divided into two parts. This is the  **part 1** , for the **Part2** click [**here**](https://dev.to/honorezemagho/implement-ocr-with-react-2-li)