formData doesn't send data in express form react js

Viewed 28

This is my react componant i was try to send form data in express js but server doesn't get any data there was show undefine when i console the data please help mee This is my react componant i was try to send form data in express js but server doesn't get any data there was show undefine when i console the data please help mee This is my react componant i was try to send form data in express js but server doesn't get any data there was show undefine when i console the data please help mee

import React, { useState } from 'react';

const UserUploadFile = () => {
  const[Info,setInfo]= useState({});
  const[file,setFile]=useState({});
  const handleBlur=(e)=>{
    const newInfo ={...Info};
    newInfo[e.target.name]=e.target.value;
    setInfo(newInfo);
  }
  const handleFileChange=e=>{
      const newFile= e.target.files[0];
      setFile(newFile);
  }
  const handleSubmit=e=>{
e.preventDefault() ;
    const formData = new FormData()
    formData.append('File', file)
    formData.append('name', Info.name)
    formData.append('testName', Info.testName)
    formData.append('Date', Info.date)
    console.log(Object.fromEntries(formData))
    fetch('/Upload/UserReport', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(data => {
      console.log(data)
    })
    .catch(error => {
      console.error(error)
    })
  }
    return (
        <div class="account">
        <div class="login">
            <form onSubmit={handleSubmit}>
              <h2>Upload Your File</h2>
              <input
                type="text"
                name="name"
                           
                onBlur={handleBlur}
                placeholder="User Name"
                required
              />  
                <input
                type="text"
                name="testName"
         
                onBlur={handleBlur}
                placeholder="Test Name"
                required
              />  
              <input
              type="date"
              name="date"
       
              onBlur={handleBlur}
              placeholder="date"
              required
            />         
             <input
                type="file"
                name="files"
       
                onChange={handleFileChange}
                placeholder="Upload Jpg png Jpeg Image"
                required
              />            
              <button type="submit" name="reg" value="submit">
                <b>Upload File</b>
              </button>
            </form>
        
        </div>
      </div>
    );
};

export default UserUploadFile;

This is backend part

const express = require("express");
const mongoose = require("mongoose");
const router = express.Router();
const UploadFileUser = require("../Scheema/UploadFileUser");
const User= new mongoose.model("UploadFileUser", UploadFileUser);
const CheakLoginControler = require('../MiddleWears/CheakLoginControler');
const fileUpload = require('express-fileupload')

router.post("/UserReport",async(req,res)=>{
   console.log(req.body.name)
  const file= req.files;
  const name= req.body.name;
  console.log(name,file)

 })
module.exports = router;

I expact my formData will show in the server

0 Answers
Related