🔧 Upload File in NextJS without any Library 🌟

"use client"
import { useState } from "react"

export default function Home() {
  const [file, setFile] = useState()

  const onSubmit = async (e) => { 
    e.preventDefault();
    console.log(file);

    let data = new FormData();
    data.set("file", file)

    let res = await fetch("/api/upload/route", {
      method: "POST",
      body: data,
    })

    let response = await res.json()
    console.log(response);
  }

  return (
    <>
      <form onSubmit={onSubmit}>
        <input type="file" onChange={(e) => setFile(e.target.files[0])} />
        <button type="submit">Upload</button>
      </form>
    </>
  )
}

import { writeFile } from 'fs/promises'

async function handler(req, res, next) { 
  let data = await req.formData()
  console.log(data);

  data = data.get("file");
  let bytedata = await data.arrayBuffer()
  let buffer = Buffer.from(bytedata)
  let path = "./public/uploads/" + data.name;

  await writeFile(path, buffer);
  return Response.json("hi:hi")
}

export { handler as POST }