server action && from state && files

import { api } from "~/trpc/server";
export default async function ImportPage() {
  async function fromAFile(formData: FormData) {
    "use server";
    console.log(formData.get("file"));
    /*   const test = await api.events.addEventsFromIcal.mutate({
         data: formData.get("file")?.toString() ?? "",
       });*/
  }
  return (

          <form action={fromAFile} className="rounded bg-gray-200 px-3 py-1">
            <label className="flex flex-row items-center gap-2 text-base text-gray-950">
              <span className="w-full">From a file</span>
              <input
                className="opacity-0"
                type="file"
                id="file"
                accept=".ics"
                required
              />
            </label>
            <button
              type="submit"
              className="w-full rounded-lg bg-blue-600 p-2 text-black"
            >
              import
            </button>
          </form>

  );
}

import { api } from "~/trpc/server";
export default async function ImportPage() {
  async function fromAFile(formData: FormData) {
    "use server";
    console.log(formData.get("file"));
    /*   const test = await api.events.addEventsFromIcal.mutate({
         data: formData.get("file")?.toString() ?? "",
       });*/
  }
  return (

          <form action={fromAFile} className="rounded bg-gray-200 px-3 py-1">
            <label className="flex flex-row items-center gap-2 text-base text-gray-950">
              <span className="w-full">From a file</span>
              <input
                className="opacity-0"
                type="file"
                id="file"
                accept=".ics"
                required
              />
            </label>
            <button
              type="submit"
              className="w-full rounded-lg bg-blue-600 p-2 text-black"
            >
              import
            </button>
          </form>

  );
}