Suggest an edit

Improve this article

Refine the answer for “How do you add image upload to a form in HTML?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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

#### <input type="file">

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">

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"`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts520 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.