Post form data without frameworks

Viewed 43

I'm trying to transcribe data from an HTML form to an external JSON file with a Node.js webapp. I'm using POST and the Formidable package.

Hi folks at Stack Overflow! If my English is messy, feel free to edit this post and enhance it.

The code I wrote seems to not work, once I press the send button in the form, the browser just keeps loading forever without any error message or fulfilled request.
This is the function meant to get the form data and transcribe it, in my RequestHandlers.js:

    function formSender (request, response) {
    const form0 = new formidable.IncomingForm ();
    
    fs.stat ("./Cars.json", (error, stats) => {
        if (!stats.isFile ()) {
            console.error (error);
            response.writeHead (404, {"Content-Type": "Text/Plain"});
            response.end ("[404] File not found.");
        }
        else {
            fs.readFile ("./Cars.json", "UTF-8", (error, data) => {
                if (error) {
                    console.error (error);
                    response.writeHead (500, {"Content-Type": "Text/Plain"});
                    response.end ("[500] Server error. I don't know how to handle them properly so check the console.");
                }
                else {
                    let carsObj = JSON.parse (data);
                    form0.parse (request, (error, fields, _files) => {
                    if (error) {
                        response.writeHead (500, {"Content-Type": "Text/Plain"});
                        response.end ("[500] Server error. I don't know how to handle them properly so check the console.");
                    }
                    //The error is around here.
                    else {
                        let formDataObj = { ...fields };
                        carsObj.push (formDataObj);
                        let formDataJSON = JSON.stringify (carsObj);
                        console.log ("Form data in JSON:\r\n" + JSON.stringify (formDataObj));
/* I added this checkpoint of sorts to check if the form data is OK.
This is because earlier versions of this webapp sent the form "successfully" only for the JSON having all the fields reading "null".
Nothing at all. It just doesn't print anything */
                        fs.writeFile ("./Cars.json", formDataJSON, function (error) {
                            if (error) {
                            response.writeHead (500, {"Content-Type": "Text/Plain"});
                            response.end ("[500] Server error. I don't know how to handle them properly so check the console.");
                            }
                            else {
                            response.writeHead (201, {"Content-Type": "Text/Plain"});
                            response.end ("[201] Form sent succesfully.");
                            }
                            });
                        }
                    });
                }
            });
        }
    });
}

This is the HTML form, meant to insert cars into the JSON:

<h1> Car Form </h1>
<h2> Version 0.5.11, I hope it works this time. (It doesn't) </h2>
<FORM method="POST" action="/Enviar" enctype="multipart/form-data" id="CarForms">
<!--That ID is meant for the CSS stylesheet-->
            <label for="Brand">Brand: </label>
            <input type="text" maxlength="20" size="20" name="Brand"/> <br>
            <label for="Model">Model: </label>
            <input type="text" maxlength="20" size="20" name="Model"/> <br>
            <label for="License_Plate">License Plate: </label>
            <input type="text" maxlength="10" size="10" name="License_Plate"/> <br>
            <label for="Color">Color: </label>
            <input type="color" name="Color"/> <br>
            <label for="Owner">Owner: </label>
            <input type="text" maxlength="40" size="40" name="Owner"/> <br>
            <h3>Additional Description</h3>
            <textarea name="Additional_Description" rows="5" cols="40" placeholder="Insert more data here..."></textarea>
            <br>
            <input type="submit" value="Send Form"/>
        </FORM>

And this how the the Cars.json file should look like:

{
    "Brand":"Ford",
    "Model":"Fusion",
    "License_Plate":"AC172DH",
    "Color":"#8D7C95",
    "Owner":"Jay Smith",
    "Additional_Description":"Sample item, not generated by the form"
}

Can anyone tell me what am I doing wrong?
I'm not using any JavaScript framework here.
And I'm not yet into frameworks, either.
On earlier versions of this webapp of sorts, I tried using URLSearchParams and GET, but it didn't work.
With that out of the way, any help is greatly appreciated.

0 Answers
Related