DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report
  1. DZone
  2. Coding
  3. Languages
  4. File Uploads for the Web (1): Uploading Files With HTML

File Uploads for the Web (1): Uploading Files With HTML

This article is the first post in a series all about uploading files to the web. In this post, we cover the steps needed to upload files using only HTML.

Austin Gil user avatar by
Austin Gil
CORE ·
Mar. 13, 23 · Tutorial
Like (1)
Save
Tweet
Share
1.30K Views

Join the DZone community and get the full member experience.

Join For Free

Today we are kicking off the first article in a series all about uploading files to the web. In this article, we’ll start with the basics of using HTML. The full series will look like this:

  1. Uploading files with HTML
  2. Uploading files with JavaScript
  3. Receiving file uploads with Node.js (Nuxt.js)
  4. Optimizing storage costs with Object Storage
  5. Optimizing delivery with a CDN
  6. 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 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 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 to include its data along with the HTTP request:

 
<form>  <label for="file">File</label>  <input id="file" type="file" />  <button>Upload</button>
</form>


Although it looks good, it doesn’t currently work well.

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.

To send the file contents as binary data, we have to change the Content-Type of the request to multipart/form-data. 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:

  1. Create an input with the type of file to access the file system.
  2. Use a form with method="post" to include a body on the request.
  3. Set the request’s Content-Type to multipart/form-data using the enctype attribute.

I hope you learned something new today and 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.

Thank you so much for reading. If you liked this article, please share it. It’s one of the best ways to support me.

HTML Upload POST (HTTP) Web Service

Published at DZone with permission of Austin Gil. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How We Solved an OOM Issue in TiDB with GOMEMLIMIT
  • Top 5 Data Streaming Trends for 2023
  • Introduction To OpenSSH
  • Microservices 101: Transactional Outbox and Inbox

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: