How to use input type file with actions #10363
-
I was trying to use actions and 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 //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 Does actions can manage input type files? Sorry if this is this is something basic but I started to learn web development recently. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
Try setting the 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. |
Beta Was this translation helpful? Give feedback.
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.