Multipart Form Submission with react

1

This isn’t really a freecodecamp question but I am trying to submit a mulitpart form to an api in react and am having problems ive searched the internet but havent found much info to help. I have a form with a few fields and a picture file to upload but keep getting a 500 error I am pretty sure it is just because my request is in the wrong format because when I test the route on the api it works fine

here is my react component (the first fetch is commented out and was my original code before adding the file upload):

import { useState } from 'react'
import Header from './Header'
import ImageUpload from './ImageUpload'
import { useForm } from "react-hook-form";


const NewPost = (props) => {

  const navigate = useNavigate();

  const [title, setTitle] = useState();
  const [text, setText] = useState();

  const token = sessionStorage.getItem("token");
  const tokenOb = JSON.parse(token)
  const tokenFetch = `Bearer ${tokenOb.token}`

  const handleSubmit = async e => {
    e.preventDefault();
    const data = Object.fromEntries(new FormData(e.target).entries());
    const formData = new FormData();
    formData.append("title", data.title)
    formData.append("text", data.text)
    formData.append("image", data.image);
    console.log(formData)
/*
    await fetch("https://blogapi1200.fly.dev/users/posts/", {
      
      method: 'Post',
      body: JSON.stringify({
        title: data.title,
        text: data.text,
        image: data.image
      }),
      headers: {
        Authorization: tokenFetch,
        //'Content-type': 'application/json; charset=UTF-8',
        'Content-type': "multipart/form-data"
      },
    })
      .then((response) => response.json())
      .then((data) => {
        navigate('/');

      })
      .catch((err) => {
        console.log(err.message);
      });
*/
await fetch("https://blogapi1200.fly.dev/users/posts/", {
      
      method: 'Post',
      body: formData,
      
      headers: {
        Authorization: tokenFetch,
        //'Content-type': 'application/json; charset=UTF-8',
        'Content-type': "multipart/form-data"
      },
    })
      .then((response) => response.json())
      .then((data) => {
        navigate('/');

      })
      .catch((err) => {
        console.log(err.message);
      });

  }

  return (
    <div className="login-wrapper">

      <Header />
      <h2>New Post</h2>
      <form encType="multipart/form-data" onSubmit={handleSubmit}>
        <label>
          <p>Title</p>
          <input type="text" name="title" onChange={e => setTitle(e.target.value)} />
        </label>
        <label>
          <p>Text</p>
          <textarea type="text" name="text" onChange={e => setText(e.target.value)} />
        </label>
        <div className="form-group">
          <label>Image:</label>
          <input type="file" className="form-control-file" id="image" name="image"/>
        </div>
        <div>
          <button type="submit">Submit</button>
        </div>
      </form>

    </div>
  )
}




export default NewPost;

this is the type of request I want to send to the api

POST http://localhost:3000/users/posts HTTP/1.1
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImNyYWlnIiwiaWF0IjoxNzAzODczMjU2LCJleHAiOjE3MDM4NzQ0NTZ9.Oxk1ayTaOU5PS-TYc-VZFzc0oQnrmV1icCCznstuET0
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="title"

title
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="text"

text here
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="image"; filename="./pizza.jpeg"
Content-Type: image/jpeg

< ./pizza.jpeg
------WebKitFormBoundary7MA4YWxkTrZu0gW--
2

I figured it out you are not supposed to have Content-type’: “multipart/form-data” in the fetch statement because it is autogenerated so it throws off the formatting