400 Bad Request API CALL when using Clarifai's API with react's useState and useEffect

Question

Trying to build an app that recognizes faces and objects in an image using clarifai's Api through react-dropzone which is a drag and drop package that i installed. when i use a static image i get a response from Clarifai with out any errors but when i try to load it from my state i keep getting 400 bad request.

I think the error might has to do with the way useState works.

Please can anyone give some help?

see the code below.

import React, { useState, useEffect} from 'react';

import Clarifai from 'clarifai';
import Dropzone from 'react-dropzone';

import Header from './components/header/header.component.jsx';
import Modal from './components/modal/modal.component';
import Box from './components/box/box.component';
import './App.css';


    const app = new Clarifai.App({
        apiKey: 'REDACTED'
    
    });

const App = () => {

    const [fileProperties, setFileProperties] = useState([]);
    const [isModalOpen, setModal] = useState(false);

    const handleDrop = acceptedFiles => {
        setFileProperties(acceptedFiles.map(file => URL.createObjectURL(file)));
        toggleModal()
    }
    useEffect(() => {
        if(fileProperties.length > 0){
            console.log(fileProperties);
            app.models.predict(Clarifai.FACE_DETECT_MODEL, fileProperties).then(
            function(response) {
                console.log(response);
            },
            function(err) {
                console.log('There was an error', err);
            }
                );          
        }
    }, [fileProperties]);

        

    const toggleModal = () => {
        setModal(!isModalOpen);
    }
    return (
        <div className="main">  
            <Header/>   
            { isModalOpen && 
                <Modal>
                    <Box isModalOpen={isModalOpen} fileProperties={fileProperties} toggleModal={toggleModal}/>
                </Modal>
            }   
            <Dropzone  onDrop={handleDrop} accept="image/*">
                {({ getRootProps, getInputProps, isDragActive, isDragAccept, isDragReject}) => {
                  // additional CSS depends on dragging status
                  const additionalClass = isDragAccept ? "accept" : isDragReject ? "reject" : "";
                  return (
                    <div{...getRootProps({className: `dropzone ${additionalClass}` })} >
                          <input {...getInputProps()} />
                          <h2>This smart box detects faces & objects like sunglasses and hats in an image</h2>
                          <span>{isDragActive ? "" : ""}</span>
                          <p>Drag and drop an image, or click to select </p>
                    </div>
                  );
               }}
            </Dropzone>
        </div>
    );  
}

export default App;

score 1 · Answer 1 · answered Aug 19 '20 at 13:28

1

URL.createObjectURL returns DOMString, you need to send base64 string or url that Clarifai can access. https://docs.clarifai.com/api-guide/predict/images

answered Aug 19 '20 at 13:28

Martin Kask

54
3

after console.loging i see that it generated this ["blob:http://localhost:3000/02c24c62-9dd0-43e7-a72e-2d524ec526c2"]. how can i convert it to base64 then? – AbdullahGumi Aug 19 '20 at 20:42

400 Bad Request API CALL when using Clarifai's API with react's useState and useEffect

1 Answers1