How do I get uploaded image in next js and save it,

How do I get uploaded image in next.js API route and save it on public folder? I have front end ready. I’m uploading images to an endpoint using plain JavaScript.
here is the onSubmit function for uploading images. Suggest me if I’m doing it wrong here. The main question is how do I retrieve it?

  const onSubmit=async(e)=>{ 
        e.preventDefault();
        const fd=new FormData()
        fd.append('myfile',image.name)
        let res=await fetch(`http://localhost:3000/api/upload`,{
            method: 'POST',
            headers: {
              "Content-Type": "image/jpeg",
            },
            body: fd,
          })
           let response=await res.json(); 

one more bonus question, it’s surely not a good idea to save the uploaded images on public folder. I have save it somewhere on the cloud.