i’m new to backend programming when i tried to send FormData refference to server the the server gets empty object {} , but when i tried to send particular normal object containing data is reaching all string properties but the image files is empty , how to fix this issue to get actual refferce of formData to server , and image to backend as file

a form component in admin page

import React, { ChangeEvent, ChangeEventHandler, FormEvent } from "react";
import { useState } from "react";
import toast, { Toaster } from "react-hot-toast";
import { CreateDB, appwriteDbServices } from "@/appwrite/dbConfig";
import Image from "next/image";
import axios from "axios";

export const AdminForm: React.FC = () => {
  const [progress, setProgress] = useState<number>(0);
  const [imageFile, setImageFile] = useState<File>();
  const [previewImage, setPreviewImage] = useState<string | null>(null);

  const imageChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    setImageFile(file);
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        console.log(e);
        setPreviewImage(reader.result as string);
      };
      reader.readAsDataURL(file);
      console.log(reader);
    }
  };

  const imageUploadHandler = async () => {
    try {
      const newForm = new FormData();
      newForm.set("image", imageFile as any);
      console.log(newForm.get("image"));

      const response = await axios.post("api/admin", { newForm });
      if (response) {
        toast.success("image uploaded");
      } else {
        throw Error("image upload failed");
      }
    } catch (error: any) {
      toast.error(error.message);
    }
  };

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    try {
      event.preventDefault();
      const formData = new FormData(event.currentTarget);
      let isFormEmpty = true;
      formData.forEach((value) => {
        if (value) {
          isFormEmpty = false;
        }
      });

      if (isFormEmpty) {
        throw new Error("Fill up all fields");
      }

      const projectPicture = formData.get("projectPicture") as File;
      if (!projectPicture) {
        toast.error("please upload project Picture");
      }

      // Mapping FormData to CreateDocument type
      const filledForm: CreateDB = {
        projectTitle: formData.get("projectTitle") as string,
        projectDescription: formData.get("projectDescription") as string,
        projectLink: formData.get("projectLink") as string,
      };

      // const data-appwrite = await appwriteDbServices.createDb(filledForm)
      // if (data-appwrite!=undefined ) {
      //   toast.success( response.projectTitle)
      // }else{
      //   throw Error(response)
      // }

      event.currentTarget;
      setPreviewImage(null);
      setProgress(0);
    } catch (error: any) {
      throw Error(error.message);
    }
  };

  return (
    <section className="max-w-4xl p-6 mx-auto bg-black rounded-md shadow-md ">
      <h1 className="text-xl font-bold text-white capitalize dark:text-white">
        upload Projects
      </h1>
      <form onSubmit={handleSubmit}>
        {progress > 0 ? (
          <div className="text-sm font-bold mt-5">
            <label htmlFor="file">upload progress:</label>
            <progress
              id="file"
              value="12"
              max="100"
              className=" ml-5 w-8/12 progress rounded-md"
            >
              {" "}
              {progress}{" "}
            </progress>
          </div>
        ) : null}
        <div className="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
          <div>
            <label
              className="text-white dark:text-gray-200"
              htmlFor="projectTitle"
            >
              projectTitle
            </label>
            <input
              id="projectTitle"
              type="text"
              name="projectTitle"
              className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
            />
          </div>
          <div>
            <label
              className="text-white dark:text-gray-200"
              htmlFor="projectDescription"
            >
              projectDescription
            </label>
            <textarea
              id="projectDescription"
              name="projectDescription"
              className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
            />
          </div>
          <div className="mt-2">
            <label
              className="text-white dark:text-gray-200"
              htmlFor="projectPicture"
            >
              projectPicture
            </label>
            <input
              id="projectPicture"
              type="file"
              accept="image/*"
              name="projectPicture"
              className="  h-[5rem] w-[18rem] flex justify-start items-center  px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
              onChange={(e) => {
                imageChangeHandler(e);
              }}
            />
            {previewImage && (
              <Image
                src={previewImage}
                alt="Preview"
                className="mt-2 w-1/2 inline rounded-xl"
                width={50}
                height={50}
              />
            )}
            <button
              onClick={imageUploadHandler}
              className="mt-5 px-6 block py-2 leading-5 text-white transition-colors duration-200 transform bg-pink-500 rounded-md hover:bg-pink-700 focus:outline-none focus:bg-gray-600"
            >
              upload
            </button>
          </div>
          <div>
            <label
              className="text-white dark:text-gray-200"
              htmlFor="projectLink"
            >
              projectLInk
            </label>
            <input
              id="projectLink"
              type="projectLink"
              name="projectLink"
              className="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
            />
          </div>
        </div>
        <div className="flex justify-end mt-6">
          <button
            type="submit"
            className="px-6 block py-2 leading-5 text-white transition-colors duration-200 transform bg-pink-500 rounded-md hover:bg-pink-700 focus:outline-none focus:bg-gray-600"
          >
            Save
          </button>
          <Toaster />
        </div>
      </form>
    </section>
  );
};

route.ts

import { CreateDB } from "@/appwrite/dbConfig";
import { NextResponse, NextRequest } from "next/server";

export async function POST(request: NextRequest) {
  try {
    const reqBody = (await request.json()) as any;

    console.log(reqBody);

    // const response = await appwriteDbServices.createDb(filledForm)
    // if (response!=undefined ) {
    //   toast.success( response.projectTitle)
    // }

    return NextResponse.json({
      message: "recieved data",
      success: true,
    });
  } catch (error: any) {
    NextResponse.json(
      {
        error: error.message,
      },
      { status: 500 }
    );
  }
}

i have tried send normal object with value of the formfields which works fine but the value of file input is empty {}

trying sending the refference of the formData is empty

sending file directly is empty

i was expecting to recieve full data of fields of form to server then saves the image to local folder by changing and other string value has to be saved as document in a db