Mastering File Uploads with HTML

File uploads are now a common thing in most websites. Whether you're creating a social network, an online shop, or a blog, allowing users to upload their photo, video or documents just makes your site a little bit interactive and better. In this article, we will learn how to create one, and spice things up by adding extra features that can allow multiple file upload and restrict the kind of file types users are allowed to upload.

Without wasting much time, let's get right into it.

Building a Simple HTML Form

Let's start by enveloping everything in the form tag with our html. It serves as a container that we can now use to insert other information such as the file upload button and other form fields we will be needing from the user.

The best part is when you now include the <input type="file"> element. This is the magic behind the feature that enables your local computer to recognize it's a file or document upload and enables that document modal to open like this:

Here’s a simple code example to achieve this:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="fileUpload">Select a file:</label>
  <input type="file" id="fileUpload" name="file">
  <input type="submit" value="Upload">
</form>

In this form:

• The action tells the form where to send the file (e.g., /upload).
• The method is set to post because that’s how files should be sent.
• The enctype="multipart/form-data" ensures the file is sent correctly.

Customizing the File Input

let's make it more understanding for users by adding some label to it. Like this:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="fileUpload">Select a file (PDF, DOC, JPG):</label>
  <input type="file" id="fileUpload" name="file">
  <input type="submit" value="Upload">
</form>

Styling the File Input with Basic CSS

Okay, I know our result is looking quite plain and rough now, so let's add some beauty to it to make it look better and better suited for something users will likely want to interact with.

 #fileUpload {
    border: 2px solid #4CAF50;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
  }

  input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

This CSS adds a border and some padding to the file input and styles the submit button to make it more attractive.

Result

Allowing Multiple File Uploads

For cases where users need to upload more than one file at a go, you can achieve this by including the multiple attribute to the file input. Like this:

<input type="file" id="fileUpload" name="file" multiple>

Now, users can select and upload several files at once.

Restricting File Types with the accept Attribute

You can also control what type of files you want your users to be able to upload by simply adding the accept attribute. Like this:

<input type="file" id="fileUpload" name="file" accept=".pdf, .doc, .jpg">

In this case, pdf, doc, and jpg are all accepted and thus, can be uploaded.

Displaying Selected Files

Wouldn't it be nice if you can see what you want to upload before doing so? well, you can but not with only HTML. You will need a little javaScript for that and that's a guide for another day.

But what we can do is let users know that their selected files will be shown after they choose them. Like this:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="fileUpload">Select a file (PDF, DOC, JPG):</label>
  <input type="file" id="fileUpload" name="file" multiple>
  <p>Selected files will appear here after selection.</p>
  <input type="submit" value="Upload">
</form>

In Summary

In this guide, we saw how we could upload a file, customize it and also restrict it to accepting only the specified file types we define.