fileInput feature in react js not working-CodePudding

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

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;

CodePudding user response：

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)}/>

CodePudding user response：

I am getting the following error when putting to API . It works perfectly in postman but when i try do it with the code below i get the CORS PREFLIGHT ERROR as well as a type error which says failed to fetch . I am confused as there is no cors error via postman .

function App () { const [item,setItem]=useState()

    // const [data,setData] = useState()
    if (item){
 
   const file = item.target.files[0];
   var myHeaders = new Headers();
   myHeaders.append("Content-Type", "image/jpeg");
   
   var formdata = new FormData();
   formdata.append("file", file);
   
   var requestOptions = {
     method: 'PUT',
     headers: myHeaders,
     body: formdata,
     redirect: 'manual'
   };
   
   fetch("https://XXX.execute-api.us-east-1.amazonaws.com/prod/myarrowbucket/IMG_0733.jpg", requestOptions)
     .then(response => response.text())
     .then(result => console.log(result))
     .catch(error => console.log('error', error));
  }
    return (
      <div>Medium Tutorial
        <form>
        <input type="file" onChange={(e) => setItem(e)}/>
    </form>