How Can i send image and text user information in react js

Question

Sign up Form Written in JSX

import './SignUp-Form-CSS.css'
import { Link } from 'react-router-dom';
import { useState, useContext } from 'react';
import AuthContext from '../Context_store/AuthContext/AuthContext';
const SignUp = () => {
  const [name, setName] = useState(null);
  const [password, setPassword] = useState(null);
  const [confirmPassword, setConfirmPassword] = useState(null);
  const [image, setImage] = useState(null);

  const authCtx = useContext(AuthContext);



  const nameChangeHandeler = (event) => {
    setName(event.target.value)
  }
  const passwordChangeHandeler = (event) => {
    setPassword(event.target.value)
  }
  const confirmPasswordChangeHandeler = (event) => {
    setConfirmPassword(event.target.value);
  }
  const imageChangeHandeler = (event) => {
    setImage(event.target.files[0]);
    console.log(event.target.files[0]);
  }
  const onSubmitHandeler = (event) => {
    event.preventDefault()
    // const data = {
    //   username: name,
    //   password: password,
    //   confirmPassword: confirmPassword,
    //   image: image

    // }
    const data=new FormData();
    data.append("name",name);
    data.append("password",password);
    data.append("confirmPassword",confirmPassword);
    data.append("image",image);
    // data.append('username',name);
    
    console.log(data);  
    authCtx.signup(data)




  }

  return (
    <div class="container">
      <div class="row">
        <div class="col-lg-10 col-xl-9 mx-auto">
          <div class="card flex-row my-5 border-0 shadow rounded-3 overflow-hidden">
            <div class="card-img-left d-none d-md-flex">
              {/* <!-- Background image for card set in CSS! --> */}
            </div>
            <div class="card-body p-4 p-sm-5">
              <h5 class="card-title text-center mb-5 fw-light fs-5">Register</h5>
              <form onSubmit={onSubmitHandeler} encType='multipart/form-data' >

                <div class="form-floating mb-3">
                  <input type="text" class="form-control"
                    id="floatingInputUsername"
                    onChange={nameChangeHandeler}
                    placeholder="myusername" required autofocus />
                  <label for="floatingInputUsername">Username</label>
                </div>

                {/* <div class="form-floating mb-3">
                  <input type="email" class="form-control" id="floatingInputEmail" placeholder="[email protected]" />
                  <label for="floatingInputEmail">Email address</label>
                </div> */}

                <hr />

                <div class="form-floating mb-3">
                  <input type="password"
                    class="form-control"
                    onChange={passwordChangeHandeler}
                    id="floatingPassword" placeholder="Password" />
                  <label for="floatingPassword">Password</label>
                </div>

                <div class="form-floating mb-3">
                  <input type="password" class="form-control"
                    onChange={confirmPasswordChangeHandeler}
                    id="floatingPasswordConfirm" placeholder="Confirm Password" />
                  <label for="floatingPasswordConfirm">Confirm Password</label>
                </div>


                <div>
                  <label>Select Logo </label>
                  <input name='image' onChange={imageChangeHandeler} type="file" class="form-control my-4" id="logo" placeholder="Select Logo  " />

                </div>

                <div class="d-grid mb-2">
                  <button class="btn btn-lg btn-primary btn-login fw-bold text-uppercase" type="submit">Register</button>
                </div>

                <a class="d-block text-center mt-2 small" >Have an account?<Link class="nav-link" to={'/login'}>  Sign In</Link></a>

                <hr class="my-4" />

                <div class="d-grid mb-2">
                  <button class="btn btn-lg btn-google btn-login fw-bold text-uppercase" type="submit">
                    <i class="fab fa-google me-2"></i> Sign up with Google
                  </button>
                </div>

                <div class="d-grid">
                  <button class="btn btn-lg btn-facebook btn-login fw-bold text-uppercase"
                    // onClick={onSubmitHandeler}
                    type="submit">
                    <i class="fab fa-facebook-f me-2"></i> Sign up with Facebook
                  </button>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
export default SignUp;

CONTEXT API

import React, { useState } from "react";
import AuthContext from "./AuthContext";


const AuthContextProvider = (props) => {
    const [token, setToken] = useState(null);

    const login = (loginDetails) => {



    }
    const signUp = (signUpDetails) => {
        console.log("Sign Up Called ");

        fetch('http://localhost:5000/register',
        {
            method:'POST',
          body:signUpDetails
          
            // body:JSON.stringify(signUpDetails),
            // headers:{
            //     'Content-Type': 'application/json'
            // }


        }).then((resp) => {
            return resp.json()
        }).then((data) => {
            console.log(data);
            return data;
            
        }).catch((err) => {
            console.log(err);
        })

    }
    const logout = () => {

    }
    const values = {
        login: login,
        signup: signUp,
        logout: logout,
        token: {
            token: token,
            setToken: setToken
        },
        isLoggedIn: !!token
    }


    return (
        <div>
            <AuthContext.Provider value={values}>
                {props.children}
            </AuthContext.Provider>

        </div>
    )
}
export default AuthContextProvider;

But When AT Node server End All Other filed Is recieved as Empty Except image Data OUTPUT OF DATA SAVED IN DATABASE

And If I follow the Approach in Which I use Simple Object as the data instead of form Data(), I and with header ( that are under // ) I do not receive images at the backend and only receive user info

Answer 1

One solution could be to send the image as a string (base64) to the backend to save the image. try to implement this in your react:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [img, setImg] = useState("Image string will come here");
  const handleChangeImg = (e) => {
    console.log(e.target.files[0]);
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onloadend = () => {
      setImg(reader.result);
    };
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <input onChange={handleChangeImg} type="file" name="image" />
      <button onClick={()=>setImg("Image string will come here")}>Reset</button>
      <h1>{img}</h1>
    </div>
  );
}

Check the code iin codesandbox here.

Related resources:

• FileReader