How to use input type file with actions

[Standard-IO]

I was trying to use actions and Form with inputs type file (an image) but I can not find a way to do it.
I usually can manage a form something like this:
(example 1)

async function manageSubmint (event){
event.preventDefault();
    const formData = new FormData(event.target);
    const response = await fetch(`someAPIendpoint/${id}/`, {
      method: "PATCH",
      headers: {
        authorization: `Bearer ${token}`,
      },
      body: formData,
    });
    \\ .... more code
}

and thats works as I expected with input files the server receives an object type file.

But I tried to use Form and an action to manage this but I only get the name of the file. I tried something like this:
(example 2)

//myFile.js
async export action({ request, params }){
  const id = params.id;
  const formData = await request.formData();
  const response = await fetch(`someAPIendpoint/${id}/`, {
      method: "PATCH",
      headers: {
        authorization: `Bearer ${token}`,
      },
      body: formData,
    });
    \\ .... more code
}
\\... more code
\\ definition of the form

return(
  <Form method="post">
    <input type="file" name="image"/>
  </Form>
)

Even I tried to use the useSubmit hook to manually set the values in a FormData object and send it to the action function.

Does actions can manage input type files?
Does the way I'm already manage this (example 1) is the correct form? am I doing something wrong?

Sorry if this is this is something basic but I started to learn web development recently.

[stuartkeith]

Try setting the encType on the form: <Form method="post" encType="multipart/form-data" />.

You should then receive the full file.

I think this could be more emphasised in the docs - I had this problem too and only found the solution by digging through the source code.

[kiliman]

Many Remix/React Router users are learning about standard HTML features for the first time. This is both great and sad. It's amazing how far off the standard path a lot of front-end dev has gone over the past several years. Nice to see frameworks are embracing Web standards more these days.

[stuartkeith]

I think it depends on your mental model on how React Router works too. React Router requires JS to be enabled and there's no actual network barrier or real browser form submission, so I don't know it's intuitive to everyone that you need to worry about encoding types in this scenario.

[jericho1050]

I would like to thank you, bro. You saved my sanity. I was looking for the solution to this problem, and it took me until morning; hours of searching for a solution were about to give up. I finally found it here.