Content-type multipart/form-data vs application/json when submitting a form

Hello guys, sorry to disturb you all; consider the following code:

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    // Convert FormData to JSON
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        headers: { 'Content-Type': 'application/json' }, // Set JSON content type
        body: JSON.stringify(formObject), // Send JSON string
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.text(); // Use response.json() if the server sends JSON
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    // Convert FormData to JSON
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        headers: { 'Content-Type': 'application/json' }, // Set JSON content type
        body: JSON.stringify(formObject), // Send JSON string
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.text(); // Use response.json() if the server sends JSON
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    // Convert FormData to JSON
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        headers: { 'Content-Type': 'application/json' }, // Set JSON content type
        body: JSON.stringify(formObject), // Send JSON string
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.text(); // Use response.json() if the server sends JSON
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    // Convert FormData to JSON
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        headers: { 'Content-Type': 'application/json' }, // Set JSON content type
        body: JSON.stringify(formObject), // Send JSON string
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.text(); // Use response.json() if the server sends JSON
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        body: formData, // Send the FormData object
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json(); // Parse JSON response if applicable
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        body: formData, // Send the FormData object
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json(); // Parse JSON response if applicable
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        body: formData, // Send the FormData object
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json(); // Parse JSON response if applicable
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        body: formData, // Send the FormData object
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json(); // Parse JSON response if applicable
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

FakerOP•11/17/24, 8:13 AM

I didn't understand, what is the difference between these 2 type of content-type ? My server can handle application/json but not multipart/form-data.... like here:

router.post('/form(.html)?', (req,res) => {
    const { username, password } = req.body;
    res.send(`Welcome, ${username}`);
})

router.post('/form(.html)?', (req,res) => {
    const { username, password } = req.body;
    res.send(`Welcome, ${username}`);
})

So when I try to send the form without using JSON.stringify in the body, I obtain an error with invalid json format

But what I want to know, what is happening, I'm lost here, I know there are 2 content-type. When we use something like that in our server script

app.use(express.json());

app.use(express.json());

What are we saying here? How our server is able to handle json files ?

glutonium•11/17/24, 9:34 AM

how the server is handling the json file, there's no need to worry about it. i mean it's the same question as how does the server listen to a certain port. indeed it is something you can learn if u want, but this is nothing to worry about for you project ot when u r making a server

in order to use json, the json that comes with the req needs some preprocessing. that preprocessing is done by express.json() middleware. now WHAT preprocessing it does, how it goes it is irrelevant

glutonium•11/17/24, 9:35 AM

u can access the data from req.body i think

FakerOP•11/17/24, 9:39 AM

yep I see, thanks

glutonium•11/17/24, 9:39 AM

also the multipart form thingy

glutonium•11/17/24, 9:40 AM

form is a bit pain in the azz to work with

glutonium•11/17/24, 9:40 AM

i think u need the multar library for it

glutonium•11/17/24, 9:40 AM

search nodejs multar

glutonium•11/17/24, 9:40 AM

it let's u handle form data + files

FakerOP•11/17/24, 9:40 AM

multer yes

FakerOP•11/17/24, 9:41 AM

just installed it

FakerOP•11/17/24, 9:41 AM

is it better to work with multipart or json ?

glutonium•11/17/24, 9:43 AM

if u r going to send files to the server then multar

glutonium•11/17/24, 9:43 AM

otherwise if just shrimple text data then i think either would work. but if u still have issues without multar then try with multar

FakerOP•11/17/24, 9:45 AM

ok, ty !

glutonium•11/17/24, 9:45 AM

welcm

glutonium•11/17/24, 9:45 AM

btw I have a project i did long ago

glutonium•11/17/24, 9:45 AM

a backend project

glutonium•11/17/24, 9:46 AM

u can check it out and see if u can kind of understand what's going on

glutonium•11/17/24, 9:46 AM

not really sure how much it'll help u, but i was using most of the things u will be usign. like 90%

glutonium•11/17/24, 9:46 AM

u can also probably get an idea on how to structure your backend

glutonium•11/17/24, 9:50 AM

https://github.com/glutonium69/backend-practice

GitHub

GitHub - glutonium69/backend-practice

Contribute to glutonium69/backend-practice development by creating an account on GitHub.

FakerOP•11/17/24, 9:50 AM

oki, will have a look, do you have a github ?

FakerOP•11/17/24, 9:50 AM

ah ty !

glutonium•11/17/24, 9:50 AM

welcome

Gglutonium how the server is handling the json file, there's no need to worry about it. i m...

Ἔ

ἔρως•11/17/24, 10:03 PM

it's actually a lot more complicated that that

Ἔ

ἔρως•11/17/24, 10:04 PM

this indicates the type of data you are sending to the server

Ἔ

ἔρως•11/17/24, 10:04 PM

multipart/form-data

multipart/form-data

sends the

POST

POST

content split by boundaries

Ἔ

ἔρως•11/17/24, 10:04 PM

the server does it's magic to parse the body

Ἔ

ἔρως•11/17/24, 10:05 PM

application/json

application/json

means you're sending json data, which the server may or may not understand

Ἔ

ἔρως•11/17/24, 10:05 PM

this is not`the same as a json file

Ἔἔρως this is *not*`the same as a json file

glutonium•11/18/24, 3:25 AM

i JUST realised that i said json file and not json data after reading your msg o_O
i was actually meaning json data but my monki brain said file

but ya i can tell json file would be quite different and rather complicated than simple json data. sorry

Ἔ

ἔρως•11/18/24, 3:41 AM

it is important to distinguish both, because a json file is sent over

multipart/form-data

multipart/form-data

and json data can be sent as a file or over

application/json

application/json

glutonium•11/18/24, 5:08 AM

i agree

Ἔ

ἔρως•11/18/24, 8:10 AM

and don't forget the weird

application/x-www-form-urlencoded

application/x-www-form-urlencoded

Ἔ

ἔρως•11/18/24, 8:11 AM

basically, what you would send in a

GET

GET

request url is sent in the body of the request

glutonium•11/18/24, 8:57 AM

hmmm i see

Ἔἔρως it is important to distinguish both, because a json *file* is sent over `multipa...

FakerOP•11/18/24, 11:07 AM

oh json file and json data are 2 different things?

Ἔ

ἔρως•11/18/24, 11:39 AM

yes

Ἔ

ἔρως•11/18/24, 11:40 AM

like how xml data and an xml file are 2 different things

Ἔ

ἔρως•11/18/24, 11:40 AM

soap servers use xml data, but sending an xml file is foreign to those

Ἔ

ἔρως•11/18/24, 11:42 AM

imagine that you are expecting a voice call and i send you the graphic of the soundwaves over mail

Ἔ

ἔρως•11/18/24, 11:42 AM

it's still my voice, but one is understandable to you and the other one is absolute nonsense

FakerOP•11/18/24, 11:49 AM

yeah I see, so in the case of json file and json data, we can easily parse json data but not json file, right ?

Ἔ

ἔρως•11/18/24, 12:18 PM

thats not what i said

Ἔ

ἔρως•11/18/24, 12:19 PM

i said that the server expects json data, but you send it form data with a file in it, the server will reject the request

Ἔ

ἔρως•11/18/24, 12:19 PM

it cant do anything with that

FakerOP•11/18/24, 12:43 PM

yeah I see, it can't do anything about that because it didn't expect that data; this can change though if we use necessary libraries or methods ?

Ἔ

ἔρως•11/18/24, 3:33 PM

nope

Ἔ

ἔρως•11/18/24, 3:34 PM

if the server expects egg whites and all you give it is a pan with a boiled egg, what do you expect the server to do?

Content-type multipart/form-data vs application/json when submitting a form

Similar Threads

Similar Threads

Similar Threads