How to detect Faces for Local Image using Clarifai

Question

I'm trying to detect Faces from Images Which I am taking from Local Folder using Clarifai API. But I am unable to do so and getting an object as response. Then Network tab shows as pending and gives empty object {} I have used the sdk script in index.html too

<script type="text/javascript" src="https://sdk.clarifai.com/js/clarifai-latest.js"></script>

Front End

import React, { Component } from 'react';

class App extends Component {
      constructor(){
        super();
        this.state = {
              input:'',
              imageUrl: '',
              box:{}
        }
      }

      calculateFaceLocation = (data) =>{
        const clarifaiFace= data.outputs[0].data.regions[0].region_info.bounding_box;
        const image = document.getElementById('preview');
        const width = Number(image.width);
        const height = Number(image.height);
        return {
          leftCol: clarifaiFace.left_col * width,
          topRow: clarifaiFace.top_row * height,
          rightCol: width - (clarifaiFace.right_col * width),
         bottomRow: height - (clarifaiFace.bottom_row * height)
        }
      }

      displayFaceBox = (box) =>{
        this.setState({ box :box});
      }


       previewFiles = ()=> {

        var preview = document.querySelector('#preview');
        var files   = document.querySelector('input[type=file]').files;

        function readAndPreview(file) {

          // Make sure `file.name` matches our extensions criteria
          if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
            var reader = new FileReader();

            reader.addEventListener("load", function () {
              var image = new Image();
              image.height = 300;
              image.title = file.name;
              image.src = this.result;
              preview.appendChild( image );

            }, false);

            reader.readAsDataURL(file);
          }

        }

        if (files) {
          [].forEach.call(files, readAndPreview);
        }
        this.setState({input: this.result })
      }


      onButtonSubmit = () =>{
        this.setState({
          imageUrl: this.state.input
        });
        fetch('http://localhost:3000/imageurl',{
          method:'post',
          headers:{'Content-Type':'application/json'},
          body:JSON.stringify({
              input : this.state.input
          })
        })
        .then(response => response.json())
        .then(response =>  this.displayFaceBox(this.calculateFaceLocation(this.response)))

      }



  render(){
    const {  imageUrl, box } = this.state;
    return (
      <div className="App">

        <input id="browse" type="file" onChange={this.previewFiles} />
        <div id="preview" box={box} imageUrl = { imageUrl} style={{top: box.topRow , right: box.rightCol , 
                             bottom: box.bottomRow , left: box.leftCol}}></div>
        <button onClick= { this.onButtonSubmit } > DETECT</button>



      </div>
    );


  }


}

export default App;

Backend :

const Clarifai = require ('clarifai')

const app = new Clarifai.App({
    apiKey: 'Changed API KEY' 
   });

   const handleApiCall = (req,res)=>{
    app.models.predict(Clarifai.FACE_DETECT_MODEL, req.body.input)
    .then(data =>{
        res.json(data);
    })
    .catch(err =>response.status(400).json("UNABLE TO HANDLE API "))
 }

 module.exports ={ 
    handleApiCall
}

Answer 1

Instead of Using PreviewFile function , OnInputChange , get the files from the input tag using e.target.files and use const formData = new FormData() to get the image from the form data.

Simply Like this

 onInputChange = (event) => {
    if (event.target.files) {

      const files = Array.from(event.target.files);
      const formData = new FormData();
      files.forEach((file, i) => {
        formData.append(i, file)
      })
      fetch(`${url}/image-upload`, {
        method: 'POST',
        body: formData
      })
        .then(res => res.json())
        .then(images => {
          this.setState({ input: images[0].url});
        })
    } else {
      this.setState({ input: event.target.value});
    }

Refer This Github Project this will give you more clear Idea.