HTML FORMS JAVASCRIPT REDUX

How to work with HTML5 forms using formData

how_to_properly_work_with_html5_forms_using_formdata
Written by encodedBicoding

While there are numerous ways one can submit contents of an HTML5 form to a server, I believe I will share with you today the best, fast and efficient way you can work with HTML5 forms, and my secret is using formData. Better still, FormData().

WHAT I EXPECT FROM MY READER

I would be using some sort of advance coding technologies in this tutorial, so it is expected that you know a bit of Javascript and you understand server-side programming so that you can fully grasp the content of this article on how to work with HTML5 forms using formData.

If you have not worked with HTML5 forms before now, read this
How to become a full-stack software engineer

PROS OF USING FORM DATA METHOD

The use of formData helps you manage every aspect or content of the form, say you’d like to upload multiple files as a user of your website registers a new account, or you just want to be in control of all the form contents.

To further explain the above, when you submit a form to a server using formData you won’t have to worry about what the server request would hold, as for each detail you specify in your form input, the server request would automatically hold it.

say we are submitting images along with normal text contents, the server request would have a
files or file attribute, depending on the number of images or files other than text you intend to submit.

I’m afraid there are no known cons to using formData

HOW DOES IT WORK?

create your HTML form in this format.

In the above code snippet, you would see some code lines like v-on:submit. This is because I wrote this code in a VueJS project and you shouldn’t concern yourself much with it.

Explaining the code

    • Since our form would be receiving data other than text, it is right we set the form type to multipart/form-data
    • Note that for every input tag, we defined its name property. This is important, as this is what we can use to make reference to the value contained in the input tag.
    • It’s just a basic form, as you can see.

Now, let’s make magic happen

Let’s assume we have a middleware that should upload every image or pdf content of the form to a service somewhere, then adds the result to the actual request object, before creating the user, or adding the user to a database.

Take a look at the following middleware function

The above function was written with the Adonis framework in mind.

Explaining the code

The class SaveApplicant holds a method that checks if the request object has certain files, and uploads them to a local folder. This method calls every time a new user tries to register.
You should notice the method req.files().["form_input_name"]
Where form_input_name is the name we gave to each input in our HTML form.

Also, notice how I save the results from uploading each file in the request object
request.body.['item_saved'], Where item_saved is the data gotten after a successful upload.
you can also use the middleware to check if the user already exists in your database and if the user does, then you’d not continue with the rest of the code.

But, why is this possible? why does the request object have those files in them?

Study this simple code carefully:

Explaining the code

In the above code snippet, we have a submit function, this function is what is called when you click the submit button on the form.

We get in form data using event.target and pass it into the FormData construction, thereby creating a new form data that represents our form.

We then pass this form data as the body of our axios call, which is contained in the register function.

With what we have done here, we can successfully work with the contents of our form data, and store user information without stress.

I hope you enjoyed this article.

Please share.

About the author

encodedBicoding

Software Engineer || Tech Enthusiast.
Ex @andela
Github: https://github.com/encodedBicoding
Geek Name: EncodedBicoding
Real Name: Dominic Isioma Olije

4 Comments

Leave a Comment