How to use AWS Textract in React/NextJS

Question

Hey i'm hoping someone can help me tidy this up or even just point me in the right direction. I'm hoping I'm at least close/on the right track.

Firstly I am using this.

My code is below.

UPDATE: Error: err TypeError: input.filter is not a function Can anyone let me know exactly what parameters I need. I am trying to just use a base64 version of my uploaded image.

Thanks

import React from 'react'
import { TextractClient, AnalyzeDocumentCommand } from '@aws-sdk/client-textract'


class Textract extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      src: null,
    }

    this.onRunOCR = this.onRunOCR.bind(this)
  }

  onRunOCR = async (event) => {

    const client = new TextractClient({
      region: 'ap-southeast-2',
      credentials: {
        accessKeyId: 'MYaccessKeyId',
        secretAccessKey: 'MYsecretAccessKey',
      },
    })
    const params = {
      Document: {
        Bytes: this.state.src,
      },
    }
    const command = new AnalyzeDocumentCommand(params)
    try {
      const data = await client.send(command)
      console.log('data', data)
      // process data.
    } catch (error) {
      console.log('err', error)
      // error handling.
    } finally {
      // finally.
    }
    console.log('Done')
  }

  onSelectFile = (evt) => {
    var self = this
    var reader = new FileReader()
    var file = evt.target.files[0]

    reader.onload = function (upload) {
      self.setState(
        {
          src: upload.target.result,
        },
        function () {
          console.log(self.state.image)
        }
      )
    }
    reader.readAsDataURL(file)
  }

  render() {
    return (
      <div>
        <div>
              <label htmlFor="file">
                Image
                <input
                  className="inputfile"
                  id="file"
                  type="file"
                  name="file"
                  onChange={(e) => {
                    this.onSelectFile(e)
                  }}
                />
              </label>
        </div>
        <div>
            <div onClick={this.onRunOCR}>
              Run Autofill
            </div>
        </div>
      </div>
    )
  }
}

export default Textract

Answer 1

Bow down to my superiority. You know when you spam middle click on the 1000 tabs you have open trying to fix something. I just went through that. And now you can to. Here it is. In plain english. Look no further. Ctrl + C, Ctrl V....

onRunOCR = async (event) => {    
    const client = new TextractClient({
      region: 'ap-southeast-2',
      credentials: {
        accessKeyId: 'XXXX',
        secretAccessKey: 'XXXX',
      },
    })
    const byteArray = new Buffer(this.state.src.replace(/^[\w\d;:\/]+base64\,/g, ''), 'base64')
    const params = {
      Document: {
        Bytes: byteArray,
      },
    }
    const command = new DetectDocumentTextCommand(params)
    try {
      const data = await client.send(command)
      console.log('data', data)
      // process data.
    } catch (error) {
      console.log('err', error)
      // error handling.
    } finally {
      // finally.
    }
  }

  onSelectFile = (evt) => {
    console.log('Uploading')
    var self = this
    var reader = new FileReader()
    var file = evt.target.files[0]

    reader.onload = function (upload) {
      self.setState(
        {
          src: upload.target.result,
        },
        function () {
          console.log(self.state.image)
        }
      )
    }
    reader.readAsDataURL(file)
    console.log('Uploaded')
  }


 <input
      className="inputfile"
      id="file"
      type="file"
      name="file"
      onChange={(e) => {
          this.onSelectFile(e)
      }}
  />

If god could code I imagine it would go something like the above.