File upload from form not woking in React

Question

File upload is not working I am stuck. I don't know how to append formdata() of file and state value in Values and pass it to api as form-data

  const [Values, setValues] = useState({});
  const [image, setImage] = useState();

  const changeHandler = (e) => {
    setValues({ ...Values, [e.target.name]: e.target.value });
  };
const onChange = (e) => {
    // let files = files;
    setValues({ ...Values, [e.target.name]: e.target.files[0] });
  };


  const submitValue = (e) => {
    e.preventDefault();
   

    const config = {
      headers: {
        Authorization: `token ` + localStorage.getItem("token"),
        "Content-type": "multipart/form-data",
      },
    };
    axios
      .patch("profile-update/", Values, config)
      .then(() => {
        alert("updated data");
      })
      .catch((error) => {
        alert(JSON.stringify(error.response.data));
      });

    console.log(allValues);
  };
  useEffect(() => {
    const config = {
      headers: {
        Authorization: `token ` + localStorage.getItem("token"),
      },
    };

    axios.get("customer-profile/", config).then((res) => {
      //  console.log(res.data.details);
      setdata(res.data.customer);
      setdetails(res.data.details);
    });
  }, []);
  return (
    <>
      <div style={styles.wrapper}>
                <form className="medical-edit-form" style={styles.form}>
          
          <small style={styles.filehelp1}>
            <span style={styles.fileP1}>
              allergic reaction?
            </span>
            <input
              onChange={changeHandler}
              name="allergic_reaction"
              style={styles.date}
              type="text"
              defaultValue={details.allergic_reaction}
            
            />
          </small>
          <small style={styles.datehelp}>
            Surgery?
            <input
              onChange={changeHandler}
              name="surgery"
              style={styles.date}
              type="text"
              defaultValue={details.surgery}
             
            />
          </small>
          <small style={styles.datehelp}>
             Menstruation Period 
            <input
              onChange={changeHandler}
              name="Menstruation"
              style={styles.date}
              type="number"
              defaultValue={details.Menstruation}
            />
          </small>
          <small style={styles.datehelp}>
            Menstruation
            <input
              name="Menstruation"
              onChange={changeHandler}
              defaultValue={details.Menstruation_date}
              style={styles.date}
              type="date"
            />
          </small>
          <small style={styles.datehelp}>
            Heridity?
            <input
              onChange={changeHandler}
              name="hereditory"
              style={styles.date}
              defaultValue={details.hereditory}
              type="text"
             
            />
          </small>
          <small style={styles.filehelp1}>
            <span style={styles.fileP1}>
              Gynacology
              Specify.
            </span>
            <input
              onChange={changeHandler}
              name="gynacology"
              style={styles.date}
              type="text"
              defaultValue={details.gynacology}
             
            />
          </small>
          <small style={styles.filehelp1}>
            <span style={styles.fileP1}>
               pregnent?
            </span>
            <input
              onChange={changeHandler}
              name="pregnant"
              style={styles.date}
              type="text"
              defaultValue={pregnant}
            
            />
          </small>
          <small style={styles.datehelp}>
            visit doctor?
            <input
              onChange={changeHandler}
              name="doctor_final_visit"
              style={styles.date}
              defaultValue={details.doctor_final_visit}
              type="date"
            />
          </small>
          <small style={styles.filehelp}>
            <span style={styles.fileP}>
              Upload image
            </span>
            <input name="prescription" onChange={onChange} type="file" />
          </small>
          <div>
            <input
              onClick={submitValue}
              style={styles.ebtn}
              type="submit"
              value="update"
            />
          </div>
        </form>
      </div>
    </>
  );
}

with out the file upload the form works fine I also want to add the file upload to this code so I can upload the file also.

Answer 1

I don't know whether this will work or not as I'm not able to test writing as per assumption.

  const [Values, setValues] = useState({});
  const [image, setImage] = useState();

  const changeHandler = (e) => {
    setValues({ ...Values, [e.target.name]: e.target.value });
  };

const FileHandler = (e) => {
    // let files = files;
    setImage(e.target.files[0]);
  };



  const submitValue = (e) => {
    e.preventDefault();

   const formData = new FormData(); 
   formData.append('Image', image);
   setValues({...Values, formData})

    const config = {
      headers: {
        Authorization: `token ` + localStorage.getItem("token"),
        "Content-type": "multipart/form-data",
      },
    };
    axios
      .patch("profile-update/", Values, config)
      .then(() => {
        alert("updated data");
      })
      .catch((error) => {
        alert(JSON.stringify(error.response.data));
      });

    
  };
  useEffect(() => {
    const config = {
      headers: {
        Authorization: `token ` + localStorage.getItem("token"),
      },
    };

    axios.get("customer-profile/", config).then((res) => {
      //  console.log(res.data.details);
      setdata(res.data.customer);
      setdetails(res.data.details);
    });
  }, []);
  return (
    <>
      <div style={styles.wrapper}>
                <form className="medical-edit-form" style={styles.form}>
          
          <small style={styles.filehelp1}>
            <span style={styles.fileP1}>
              allergic reaction?
            </span>
            <input
              onChange={changeHandler}
              name="allergic_reaction"
              style={styles.date}
              type="text"
              defaultValue={details.allergic_reaction}
            
            />
          </small>
          <small style={styles.datehelp}>
            Surgery?
            <input
              onChange={changeHandler}
              name="surgery"
              style={styles.date}
              type="text"
              defaultValue={details.surgery}
             
            />
          </small>
          <small style={styles.datehelp}>
             Menstruation Period 
            <input
              onChange={changeHandler}
              name="Menstruation"
              style={styles.date}
              type="number"
              defaultValue={details.Menstruation}
            />
          </small>
          <small style={styles.datehelp}>
            Menstruation
            <input
              name="Menstruation"
              onChange={changeHandler}
              defaultValue={details.Menstruation_date}
              style={styles.date}
              type="date"
            />
          </small>
          <small style={styles.datehelp}>
            Heridity?
            <input
              onChange={changeHandler}
              name="hereditory"
              style={styles.date}
              defaultValue={details.hereditory}
              type="text"
             
            />
          </small>
          <small style={styles.filehelp1}>
            <span style={styles.fileP1}>
              Gynacology
              Specify.
            </span>
            <input
              onChange={changeHandler}
              name="gynacology"
              style={styles.date}
              type="text"
              defaultValue={details.gynacology}
             
            />
          </small>
          <small style={styles.filehelp1}>
            <span style={styles.fileP1}>
               pregnent?
            </span>
            <input
              onChange={changeHandler}
              name="pregnant"
              style={styles.date}
              type="text"
              defaultValue={pregnant}
            
            />
          </small>
          <small style={styles.datehelp}>
            visit doctor?
            <input
              onChange={changeHandler}
              name="doctor_final_visit"
              style={styles.date}
              defaultValue={details.doctor_final_visit}
              type="date"
            />
          </small>
          <small style={styles.filehelp}>
            <span style={styles.fileP}>
              Upload image
            </span>
            <input name="prescription" onChange={FileHandler} type="file" />
          </small>
          <div>
            <input
              onClick={submitValue}
              style={styles.ebtn}
              type="submit"
              value="update"
            />
          </div>
        </form>
      </div>
    </>
  );
}