How do i upload a image file with Axios from a form

Question

I need to upload a image file to my API with Axios calls

But i keep getting a error code 500 no matter what i do?

Here is what i have done so far.

import React, { useState, useContext, useEffect } from "react";
import Axios from "axios";

// Context
import { TokenDataContext } from "../Contexts/TokenContext";

// Components
import AdminNav from "../components/admin/AdminNav";

const AddAssets = () => {
  const { token } = useContext(TokenDataContext);
  const header = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };

  // Create volunteer
  const [assetCreated, setAssetCreated] = useState(false);
  const [badAsset, setBadAsset] = useState(false);
  function handleVolunteerCreateInfo(e) {
    e.preventDefault();
    setAssetCreated(false);
    setBadAsset(false);
    const form = e.target;
    const file = form[0].files;

    // console.log(username + ' ' + password);

    Axios.post(
      "http://localhost:4000/api/v1/assets",
      {
        file: file,
      },
      header
    )
      .then((response) => {
        if (response.status === 200) {
            setAssetCreated(true);
            setBadAsset(false);
        }
      })
      .catch((error) => {
        setAssetCreated(false);
        setBadAsset(true);
      });
  }

Here's what it looks like in insomnia

and here is the error