Today we are kicking off the first post in a series all about uploading files to the web. In this post, we’ll start with the basics using HTML. The full series will look like:
- Upload files with HTML
- Upload files with JavaScript
- Receive uploads in Node.js (Nuxt.js)
- Optimize storage costs with Object Storage
- Optimize performance with a CDN
- Upload security & malware protection
Access Files
The very first step is accessing a file to upload. Unfortunately, or rather, fortunately, browsers can’t access our file systems. If they did, it would be a major security concern.
There is work being done on the File System Access API, but it’s experimental and will be limited access, so let’s just pretend it doesn’t exist.
Accessing a file requires user interaction, which means we need something in the UI for the user to interact with. Conveniently, there is the input element with a file type
attribute.
<input type="file" />
On its own, a file input isn’t very useful. It allows a user to select a file from their device, but that’s about it.
To actually send the file to a server, we need to make an HTTP request, which means we need a <form>
. We’ll put the file input inside along with a <button>
to submit the form. The input will also need a <label>
to make it accessible for assistive technology, an id
attribute to associate it with the label, and a name
attribute in order to include its data along with the HTTP request.
<form>
<label for="file">File</label>
<input id="file" type="file" />
<button>Upload</button>
</form>
Looks good 👍.
Doesn’t work good, though 👎.
Include a Request Body
If we watch the network tab as we submit the form, we can see that it generates a GET request, and the payload is sent as a query string that looks like this: “?name=filename.txt
“. It’s essentially a key-value pair, with the key being the input name
and the value being the name of the file.
This is sent as a string.
Not quite what we’re going for here.
We can’t actually send a file using a GET request because you can’t put a file in the query string parameters. We need to put the file in the body of the request. To do that, we need to send a POST request, which we can do by changing the form’s method
attribute to "post"
.
<form method="post">
<label for="file">File</label>
<input id="file" name="file" type="file" />
<button>Upload</button>
</form>
Now, if we explore that request, we can see that we are making a post request. We can also see that the request has a payload containing the form’s data. Unfortunately, the data is still just a key-value pair with the input name
and the filename.
Set the Content-Type
We’re still not actually sending the file, and the reason has to do with the request “Content-Type
“.
By default, when a form is submitted, the request is sent with a Content-Type
of application/x-www-form-urlencoded
. And unfortunately, we can’t send the binary file information as URL encoded data.
In order to send the file contents as binary data, we have to change the Content-Type
of the request to multipart/form-data
. And in order to do that, we can set the form’s enctype
attribute.
<form method="post" enctype="multipart/form-data">
<label for="file">File</label>
<input id="file" name="file" type="file" />
<button>Upload</button>
</form>
Now, if we submit the form one more time, we can see the request uses the POST method, has the Content-Type
set to multipart/form-data
. In Chromium browsers, you’ll no longer see the request payload, but you can see it in the Firefox devtools under the request Params tab.
We did it!!!
Recap
With all that in place, we can upload files using HTML. To re-iterate, sending files with HTML requires three things:
- Create an input with the
type
of file to access the file system. - Use a form with
method="post"
to include a body on the request. - Set the request’s
Content-Type
tomultipart/form-data
using theenctype
attribute.
I hope you learned something new today, and you come back for the rest of the series. In the rest of the series, we’ll cover things like uploading files with JavaScript, receiving files on the backend, optimizing resources and costs with Object Storage, security concerns for uploads, and delivery improvements.
Once again, here’s what the series outline will look like:
- Upload files with HTML
- Upload files with JavaScript
- Receive uploads in Node.js (Nuxt.js)
- Optimize storage costs with Object Storage
- Optimize performance with a CDN
- Upload security & malware protection
Thank you so much for reading. If you liked this article, and want to support me, the best ways to do so are to share it, sign up for my newsletter, and follow me on Twitter.
Originally published on austingil.com.