How to Upload Files With HTML
source link: https://hackernoon.com/how-to-upload-files-with-html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to Upload Files With HTML
4 min
by @austingil
Austin Gil
@austingil
I want to help you build better websites. It's fun!
Too Long; Didn't Read
This is the first post in a series about uploading files to the web. The full series will look like: Uploading files with HTML, uploading files with JavaScript and receiving file uploads with Node.js. Optimizing storage costs with Object Storage and Optimizing delivery with a CDN are the next two posts.audio
element.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 of usingĀ HTML. The full series will look like this:
-
Uploading files with JavaScript
-
Receiving file uploads with Node.js (Nuxt.js)
-
Optimizing storage costs with Object Storage
-
Optimizing delivery with a CDN
-
Securing file uploads with malware scans
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 and 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
Ā toĀmultipart/form-data
Ā using theĀenctype
Ā 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:
-
Uploading files with JavaScript
-
Receiving file uploads with Node.js (Nuxt.js)
-
Optimizing storage costs with Object Storage
-
Optimizing delivery with a CDN
-
Securing file uploads with malware scans
Thank you so much for reading. If you liked this article, pleaseĀ share it. It's one of the best ways to support me. You can alsoĀ sign up for my newsletter,Ā orĀ follow me on TwitterĀ if you want to know when new articles are published.
Originally published onĀ austingil.com.
The Web Development and eCommerce Writing Contest is brought to you by Elastic Path in partnership with HackerNoon. Publish your thoughts and experiences on #eCommerce or #web-development to win a cash prize!
Elastic Path is the only commerce company making Composable Commerce accessible for tech teams with unique product merchandising requirements and complex go-to-market strategies. Explore our product today!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK