HTML Exercises - Uploading Files

In these exercises, we will practice uploading single and multiple files using the file input control on an HTML form. This set of exercises accompanies our Forms - Uploading Files article.

Exercises text

1. Uploading a single file (View the solution)

Create an HTML page having a form with a file input control. The control allows the user to upload a single file of any type.

2. Uploading a single file of a predefined type (View the solution)

Create an HTML page containing a form with a file input control. The control allows the user to upload a single file whose file type belongs to a set of predefined file types.

3. Uploading multiple files (View the solution)

Create an HTML page that has a form with a file input control. The control allows for uploading multiple files of any type.

4. Uploading multiple files of predefined types (View the solution)

Create an HTML page that has a form with a file input control. The control allows for uploading multiple files belonging to a set of predefined file types.

Solutions

1. Uploading a single file

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>
    <form action="some-page" method="post" enctype="multipart/form-data">

        <label for="my-file-control-id">Choose files:</label>
        <input type="file" name="my-file-control" id="my-file-control-id">

        <button>Submit</button>

    </form>
</body>
</html>

Explanation

This page has an HTML form that submits its data to some-page endpoint using the post method:

<form action="some-page" method="post" enctype="multipart/form-data">

Note: Replace "some-page" with your form-processing page name.

Since the form is used for file uploading, its encoding must be set to the value of "multipart/form-data". The form has a file input control (<input type="file">), an associated label control (<label>) and a Submit button (<button>):

<label for="my-file-control-id">Choose files:</label>
<input type="file" name="my-file-control" id="my-file-control-id">

<button>Submit</button>

The file input control has name and id attributes and allows for the upload of a single file of any type. When we click on the Browse... button, the file dialog opens and allows us to choose and open any file. Once we submit the form, the selected file will be sent/uploaded to a server for further processing.

Note: Behind the scenes, the form submits the input file control's name, the binary content of our file and the original file name.

2. Uploading a single file of a predefined type

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>
    <form action="some-page" method="post" enctype="multipart/form-data">

        <label for="my-file-control-id">Choose files:</label>
        <input type="file" name="my-file-control" id="my-file-control-id" accept=".jpg, .png, .gif">

        <button>Submit</button>

    </form>
</body>
</html>

Explanation

This HTML page has a form with a single file input control (<input type="file">) that allows uploading a single file:

<input type="file" name="my-file-control" id="my-file-control-id" accept=".jpg, .png, .gif">

The allowed file types are specified inside the accept attribute as a comma-separated list of file extensions. In our case we can upload a file with *.jpg, *.png, or *.gif extensions. As before, the file input control also has name and id attributes. The id attribute is optional, but the name attribute should be included.

As before, the form must have the "multipart/form-data" encoding if we intend to use it for file uploading. In addition to a file control, the form also has a label control, and a Submit button.

3. Uploading multiple files

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>
    <form action="some-page" method="post" enctype="multipart/form-data">

        <label for="my-file-control-id">Choose files:</label>
        <input type="file" name="my-file-control" id="my-file-control-id" multiple>

        <button>Submit</button>

    </form>
</body>
</html>

Explanation

This HTML page has a form with a file input control that allows selecting and uploading multiple files. This is achieved by adding the multiple attribute to our file input control:

<input type="file" name="my-file-control" id="my-file-control-id" multiple>

These selected files can be of any type.

4. Uploading multiple files of predefined types

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page Title</title>
</head>
<body>
    <form action="some-page" method="post" enctype="multipart/form-data">

        <label for="my-file-control-id">Choose files:</label>
        <input type="file" name="my-file-control" id="my-file-control-id" accept=".jpg, .png, .gif" multiple>

        <button>Submit</button>

    </form>
</body>
</html>

Explanation

The file input control (<input type="file">) on this form allows for:

  1. Selecting and uploading multiple files using the multiple attribute.
  2. Restricting the file types to a set of predefined file types, using the comma-separated values inside the accept attribute.

Note: This set of exercises deals only with the HTML side of uploading a file. In production, uploaded files should also be validated using the File API interfaces in JavaScript and a server-side scripting language, such as PHP.