H
Hono•2mo ago
ਜੀਜਾ ਜੀ NaviTheCoderboi

Form data error

why do i get invalid body error even it has correct content-type header 
const formData = new FormData(e.target as HTMLFormElement);

fetch('http://localhost:8000/playlist/create', {
    method: 'POST',
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    body: formData,
    credentials: 'include',
}).then((v) => {
    console.log(v);
});
const formData = new FormData(e.target as HTMLFormElement);

fetch('http://localhost:8000/playlist/create', {
    method: 'POST',
    headers: {
        'Content-Type': 'multipart/form-data'
    },
    body: formData,
    credentials: 'include',
}).then((v) => {
    console.log(v);
});
i am using honojs as backend 
TypeError: Failed to parse body as FormData.
    at node:internal/deps/undici/undici:5675:27
    at successSteps (node:internal/deps/undici/undici:5719:27)
    at fullyReadBody (node:internal/deps/undici/undici:4609:9)
...
TypeError: Failed to parse body as FormData.
    at node:internal/deps/undici/undici:5675:27
    at successSteps (node:internal/deps/undici/undici:5719:27)
    at fullyReadBody (node:internal/deps/undici/undici:4609:9)
...
7 Replies
ambergristle
ambergristle•2mo ago
are you sure e.target is valid data? casting is almost never a good idea also, how are you reading the form data?
ਜੀਜਾ ਜੀ NaviTheCoderboi
ਜੀਜਾ ਜੀ NaviTheCoderboiOP•2mo ago
yup i tried this way also 
            <button
                onClick={() => {
                    const formData = new FormData();
                    formData.append('name', 'test');

                    fetch('http://localhost:8000/playlist/create', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        },
                        body: formData,
                        credentials: 'include'
                    }).then((v) => {
                        console.log(v);
                    });
                }}
            >
                send request
            </button>
            <button
                onClick={() => {
                    const formData = new FormData();
                    formData.append('name', 'test');

                    fetch('http://localhost:8000/playlist/create', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        },
                        body: formData,
                        credentials: 'include'
                    }).then((v) => {
                        console.log(v);
                    });
                }}
            >
                send request
            </button>
ambergristle
ambergristle•2mo ago
How are you reading the form data (server-side)?
ਜੀਜਾ ਜੀ NaviTheCoderboi
ਜੀਜਾ ਜੀ NaviTheCoderboiOP•2mo ago
import { Hono } from 'hono';
import { authMiddleware } from '../middlewares/auth.js';
import { validator } from 'hono/validator';

const playlist = new Hono().use(authMiddleware);

playlist.post('/create', async (ctx) => {
    console.log(await ctx.req.parseBody());
});

export default playlist;
import { Hono } from 'hono';
import { authMiddleware } from '../middlewares/auth.js';
import { validator } from 'hono/validator';

const playlist = new Hono().use(authMiddleware);

playlist.post('/create', async (ctx) => {
    console.log(await ctx.req.parseBody());
});

export default playlist;
ambergristle
ambergristle•2mo ago
Checks out. I assume you’re not reading the body in middleware Have you tried using c.formData, just for science
ਜੀਜਾ ਜੀ NaviTheCoderboi
ਜੀਜਾ ਜੀ NaviTheCoderboiOP•2mo ago
it got solved when i remove 'Content-type' of multipart is it issue with honojs?
ambergristle
ambergristle•2mo ago
try logging the request headers. it might get added automatically when you use FormData

Did you find this page helpful?