Component Image Upload - using forms

[half-metal]

I'm trying to create a component that allows for uploading an image and write to the filesystem called UploadImage.svelte within /upload-with-component route. However the solution I have using form actions as route (which works) doesn't seem to allow for this as a component. The route solution is based on help from this post #7974

This repo I attempt to create a workable component is here (edited so has all examples):
https://github.com/half-metal/image-upload

/upload-with-component or /upload-with-api is the route I am trying to get working

But get this error when it attempts to post

I'm kept the original route /upload-with-form that does this functionality fine with forms and allow you to upload the image. So I imagine it's a tweak to get this to work as expected as a component /upload-with-component . Using a component would be much better than recreating this several times in the several routes.

[half-metal]

I changed the repo https://github.com/half-metal/image-upload , and tried using API Post with route /upload-with-api but have to remove the <form> and then unsure how to turn into formData() when sending on the post.

[half-metal]

Figured it out and updated repo https://github.com/half-metal/image-upload

I was having trouble with two items

1. +server.js uses "new Response" for some reason

//return { filename: file.name }; this would work with +page.server.js (which to me is confusing diff behavior)
return new Response(JSON.stringify({filename: file.name}) ); //this works for +server.js

2. I changed the multipart form to look like this
   <form method="post" enctype="multipart/form-data" action="upload-image">
   where the action is using the api, and including the enctype

This does what I wanted, although confused why Sveltekit navigates to the action page.