I am using React and trying to send the form Input as well as a image file to a express server at a same time. I tried by appending these inputs data and file to the formData() and sending it to backend through axios post request, but the problem is : The form input given by user is perfectly going to express server but file is undefined in backend

My JSX

<form onSubmit={sendData}>
        <input value={data.productName} onChange={handleChange} type="text" name="productName" />
        <input value={data.productfeatures} onChange={handleChange} type="text" name="productfeatures" />

        <input onChange={imgChnage} type="file" name="test_files" />
        <button>Submit</button>
</form>

My function to handle input

const [data, setData] = useState({
    productName: "",
    productfeatures: "",
  })
  const { productName, productfeatures } = data;
  const [imgHolder, setImgHolder] = useState();
  const handleChange = (evt) => {
    const value = evt.target.value;
    setData({
      ...data,
      [evt.target.name]: value
    });
  }
  const imgChnage = (e) => {
    setImgHolder(e.target.files[0]);
  };
  console.log(imgHolder);
  const sendData = async (e) => {
    e.preventDefault();
    const fd = new FormData();
    fd.append('name', productName);
    fd.append('features', productfeatures);
    fd.append('image', imgHolder);
    try {
      await axios
        .post("http://localhost:3001/pnit/v1/api/product", fd)
    } catch (error) {
      console.log(error);
    }

All combined code

 import { useState } from "react";
    import axios from "axios";
    function App() {
      const [data, setData] = useState({
        productName: "",
        productfeatures: "",
      })

      const { productName, productfeatures } = data;
      const [imgHolder, setImgHolder] = useState();

      const handleChange = (evt) => {
        const value = evt.target.value;
        setData({
          ...data,
          [evt.target.name]: value
        });
      }


      const imgChnage = (e) => {
        setImgHolder(e.target.files[0]);
      };
      
      const sendData = async (e) => {
        e.preventDefault();
        const fd = new FormData();
        fd.append('name', productName);
        fd.append('features', productfeatures);
        fd.append('image', imgHolder);
        try {
          await axios
            .post("http://localhost:3001/pnit/v1/api/product", fd)
        } catch (error) {
          console.log(error);
        }
    
      }
    
      return (
        <>
          <form onSubmit={sendData}>
        <input value={data.productName} onChange={handleChange} type="text" name="productName" />
        <input value={data.productfeatures} onChange={handleChange} type="text" name="productfeatures" />

        <input onChange={imgChnage} type="file" name="test_files" />
        <button>Submit</button>
        </form> 
        </>
      );
    }
    
    export default App;

CodePudding user response：

Hello developers, the problem is solved !!

Steps to solve a problem :

install the dependency called express-fileupload inside server by the command npm i express-fileupload.
import the express-fileupload at the main file of server.
And finally, call the middleware app.use(fileupload());

Why the problem occured !:

Because, by default the req.files is undefined but calling the middleware at server, it parse the req.files and shows up the files sent from frontend.