How do you add image upload to a form in HTML?

HTMLJunior~2 min read

To add the ability to upload an image (or any file) through an HTML form, use the element <input type="file">.

This type creates a "Choose file" button, through which the user can pick an image from their device, and the browser sends it to the server together with the rest of the form data.

1. Basic image upload form example

html

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="photo">Upload a photo:</label>
  <input type="file" id="photo" name="image" accept="image/*">
  <button type="submit">Submit</button>
</form>

What matters here:

type="file" creates the file-choosing button;
name="image" is the name under which the file is sent to the server;
accept="image/*" allows choosing only images (jpg, png, gif, etc.);
enctype="multipart/form-data" is a required form attribute for sending files;
method="post" is needed to send binary data (files).

2. Breaking down the key parts

Creates the file-selection interface:

html

<input type="file" name="photo">

One file can be chosen.

To allow choosing several, add the multiple attribute:

html

<input type="file" name="photos" multiple>

The accept attribute

Restricts the type of files that can be uploaded.

Value	What it allows uploading
`image/*`	All image types
`.jpg,.png,.gif`	Only the specified formats
`video/*`	Video
`audio/*`	Audio

Example:

html

<input type="file" name="avatar" accept=".jpg,.png">

The enctype attribute

A form with files must include:

html

enctype="multipart/form-data"

This tells the browser that the data needs to be packaged in a special way, otherwise the file will not reach the server correctly.

3. Example with multiple files

html

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="files">Choose images:</label>
  <input type="file" id="files" name="gallery" accept="image/*" multiple>
  <button type="submit">Upload</button>
</form>

The user will be able to choose several images at once.

4. What happens on submission

If the user chose the file photo.jpg, the browser sends it together with the rest of the form data:

javascript

Content-Disposition: form-data; name="image"; filename="photo.jpg"
Content-Type: image/jpeg

The server can accept and store the file (for example, via PHP, Python Flask, Node.js, etc.).

5. Adding a preview (optional)

You can show a thumbnail of the image before uploading, using JavaScript:

html

<input type="file" id="file" accept="image/*">
<img id="preview" width="200">

<script>
  const input = document.getElementById('file');
  const preview = document.getElementById('preview');

  input.addEventListener('change', () => {
    const file = input.files[0];
    if (file) {
      preview.src = URL.createObjectURL(file);
    }
  });
</script>

Now the chosen image appears on the page right away, before submission.

Summary:

Element	Purpose
`<input type="file">`	File-selection field
`accept`	Restricts the type of files (e.g. `image/*`)
`multiple`	Allows choosing several files
`enctype="multipart/form-data"`	Required form attribute for sending files
`method="post"`	Used when sending files
`name`	The field name under which the file is sent to the server

In simple terms: To add image upload, it is enough to write:

html

<input type="file" accept="image/*">

And to send it to the server, wrap the field in a form with method="post" and enctype="multipart/form-data".

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.