Send data and files through multi-part forms with FormData in HTML

I have been doing a lot of forms submit that include inputs type text and file for images a lot lately so I thought it would be a great idea to share how it is done, or at least how I did. This is a solution using pure html and JavaScript with no addition add on or frameworks. (Gotta start from the basics!)

At first, I was just creating a bunch of input elements and grabbing the data from each of them to send using RESTful API ( GET , POST ). As I researched more about submitting inputs, I came across the form element, which grabs ALL input values in one place and send them up, which is much more convenient and efficient.

// sendData.html
<form action=”/endpointUrl” method=”post”>
   First name: <input type=”text” name=”fName”>
   Select Image: <input type=”file” name=”image” id=”imageUpload”>
   <button type=”submit”>Submit</button>
</form>

We first start with creating a basic html form element, nothing fancy. We also need the inputs so that we can submit them, which for this particular example, its a text box and and image upload. Everything is good so far. So If I click on the submit button, it should send all the inputs within our form to our endpointUrl through the form’s action attribute. And it can do this because we have specified the form’s method attribute to be a POST call to our endpointUrl.

Okay, now imagine we had setup and implement a back end where we can hit the endpointUrl for a POST call to process our data. But when we tried to extract the data, we found out that nothing was sent (the data is in a JSON format). Now we’re scratching our head and wondering why the data was not sent. Didn't we have our initial setup of the form and its inputs correctly? Well, almost.

What we were missing in our form was to include the enctype=”multipart/form-data” attribute. So our form element should look like this now:

<form name=”myForm” enctype=”multipart/form-data” action=”/endpointUrl” method=”post”>

This is because we are sending an input type file along with regular text inputs. So the data gets split into two different data objects. This is not done automatically for us, we have to create the data object to send to our back end. Luckily, there is already a data object called FormData that we can utilize to encompass our input data.

// sendData.js
let formData = new FormData()
formData.append(‘imageUpload’, imageUpload)
formData.append(‘fName’, fName)
// do the POST call

Above is the JavaScript code to extract form data and send to our POST call. What we are essentially doing here is creating a new FormData, appending our data (text, files, etc) and doing a POST call through XHR or AJAX depending on how you are doing it. When you send your data using FormData, it will partition your data into two separate objects that you can access once you receive it on your back end. You can find more information on sending forms through Javascript here.

It is good to know how files are sent and uploaded using the pure HTML and JavaScript way so that you can incorporated into other frameworks as you wish can have a better understanding of how certain libraries do it.