How does one access the Clarifai API for local file uploads in React?

Question

This is my first question in Stack Overflow in my developer journey. In my project, I have implemented a file upload system which on clicking the button would trigger the Clarifai API recognition. Below is a snippet of my code where the thing is happening. Unfortunately, it seems to me that the this.state.input isn't updating in the right manner so that the API could respond. Any sort of help would be highly appreciated. Thank you.

 handleImage = (e) => {
    this.setState({input: URL.createObjectURL(e.target.files[0])});
  }
  onButtonSmash = () => {
    this.setState({imageUrl: this.state.input});
    app.models.predict(Clarifai.CELEBRITY_MODEL, this.state.input)
      .then(response => this.setState({solution: response.outputs[0].data.regions[0].data.concepts})
      .catch(err => console.log(err)))
  } 
    <div>
      <input type="file" onChange={this.handleImage} />
    </div>

score 0 · Answer 1 · answered Jan 19 '21 at 07:24

0

Make sure you have initialized the API as such: https://github.com/Clarifai/clarifai-javascript#basic-use
Make sure that onButtonSmashed is called (looks nested in your code snippet)

answered Jan 19 '21 at 07:24

Jeremy Faret

316
2
3

I have did that, sir. With image Url it works just fine. And onButtonSmashed is also called. The problem is that the api isn't taking a valid url input, this I found by console.log ing. So is there any other way we can create a url from a local file apart from this and base 64 method ? Thank you. – Neellohit Senapati Jan 20 '21 at 08:05
@NeellohitSenapati What error do you see in the console? – Jeremy Faret Jan 20 '21 at 12:05

How does one access the Clarifai API for local file uploads in React?

1 Answers1