CODEWITHSUNDEEP
javascriptreactjsfetchreact-select
lb2020
lb2020

Reputation: 137

fileInput feature in react js not working

I want to use the fileInput in my react js application but i am getting 'fileinput' is not defined error . Any way i can get this to work?

 let data = new FormData();
    data.append("", fileInput.files[0], "/C:/Users/hp/Downloads/IMG_0733.jpg");

I tried looking for a package called fileInput but could not find .

Here is full code

i

mport React, { Component } from 'react';
import axios from 'axios';
import * as os from 'os';

import { useState } from 'react';





function  App  () {

  

    const api = 'https://XXX.execute-api.us-east-1.amazonaws.com/prod/myarrowbucket/IMG.JPG';
    // const [data,setData] = useState()
    let data = new FormData();
    data.append("", fileInput.files[0], "/C:/Users/hp/Downloads/IMG_0733.jpg");
    

    let config = {
      method: 'put',
      url: 'https://XXXX.execute-api.us-east-1.amazonaws.com/prod/XX/IMG_0733.jpg',
      headers: { 
        'Content-Type': 'image/jpeg', 
        ...data.getHeaders()
      },
      data : data
    };
    
    axios(config)
    .then((response) => {
      console.log(JSON.stringify(response.data));
    })
    .catch((error) => {
      console.log(error);
    });
    
    return (
      <div>Medium Tutorial
        <form>
        {/* <input type="file" onChange={(e) => setItem(e)}/> */}


    </form>


      </div>
    );
  }

export default App;

Upvotes: 0

Views: 729

Answers (1)

Guilherme Toledo
Guilherme Toledo

Reputation: 11

You are getting an error because 'fileinput' is not defined, meaning it doesn't exist, and you are trying to access it.

You have to create a state to store the file from the input and pass it as a reference to data.append().

//create a state to hold the files
const [item, setItem] = useState();

//passing only the first file from the state
data.append("name", item.files[0]);

//updating the files in state
<input type="file" onChange={(e) => setItem(e)}/>

Upvotes: 1

Related Questions