How do I add a file upload field to an HTML form?

Set the form enctype attribute to multipart/form-data and add an input element with type='file'. The form backend must support receiving multipart submissions.

Why does my file upload not work?

The most common cause is a missing enctype='multipart/form-data' attribute on the form element. Without it, the browser sends the form as URL-encoded data and the file is not included.

How do I restrict file types in an HTML form?

Use the accept attribute on the file input to restrict the file picker to specific MIME types or extensions. For example, accept='.pdf,.doc' or accept='image/*'. Always validate file types on the server side as well.

What is the maximum file size for HTML form uploads?

HTML itself does not limit file size. The limit is set by the server or form backend service. Most services allow 10-25MB per file on standard plans. Use a hidden MAX_FILE_SIZE field as a client-side hint, but always enforce limits server-side.

Can I upload multiple files in one HTML form?

Yes. Add the multiple attribute to the file input element. The browser allows selecting multiple files, and they are submitted as an array under the same field name.

How to Add File Upload to an HTML Form

File uploads are essential for job application forms, document submission, support tickets with attachments, and any workflow where users need to send files alongside their form data.

This guide covers everything needed to add file upload to an HTML form, from basic markup to secure handling.

Basic file upload form

Two requirements for file uploads:

The form must have enctype="multipart/form-data"
The form must contain an <input type="file"> element

1
<form action="https://api.formsfort.com/submit" method="POST" enctype="multipart/form-data">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="name">Name</label>
5
  <input type="text" id="name" name="name" required />
6

7
  <label for="resume">Resume</label>
8
  <input type="file" id="resume" name="resume" />
9

10
  <button type="submit">Submit application</button>
11
</form>

Without enctype="multipart/form-data", the browser sends the form as application/x-www-form-urlencoded and the file data is not included. This is the most common mistake.

Restricting file types

Use the accept attribute to limit which files the user can select:

1
<input type="file" name="document" accept=".pdf,.doc,.docx" />
2
<input type="file" name="photo" accept="image/*" />
3
<input type="file" name="spreadsheet" accept=".csv,.xlsx,.xls" />

Accept value	Allows
`.pdf`	PDF files only
`.pdf,.doc,.docx`	PDF and Word documents
`image/*`	All image types
`image/png,image/jpeg`	PNG and JPEG only
`video/*`	All video types
`audio/*`	All audio types
`.csv,.xlsx`	Spreadsheets

The accept attribute only filters the file picker dialog. Users can still bypass it by selecting “All files.” Always validate file types on the server side.

Multiple file uploads

Add the multiple attribute to allow selecting more than one file:

1
<label for="attachments">Attachments (up to 5 files)</label>
2
<input type="file" id="attachments" name="attachments" multiple accept=".pdf,.png,.jpg" />

The files are submitted as an array under the same field name. Your form backend should handle multiple files per field.

Setting file size limits

Client-side hint

Add a hidden MAX_FILE_SIZE field as a hint to the browser (not enforced by all browsers):

1
<input type="hidden" name="MAX_FILE_SIZE" value="10485760" /> <input type="file" name="document" />

The value is in bytes (10485760 = 10MB).

Client-side validation with JavaScript

For reliable client-side size checking:

1
document.querySelector('input[type="file"]').addEventListener("change", (e) => {
2
  const maxSize = 10 * 1024 * 1024;
3
  for (const file of e.target.files) {
4
    if (file.size > maxSize) {
5
      alert(`${file.name} is too large. Maximum size is 10MB.`);
6
      e.target.value = "";
7
      return;
8
    }
9
  }
10
});

Server-side enforcement

Always enforce file size limits on the server or form backend. Client-side checks can be bypassed.

Styling the file input

The default file input looks different across browsers. For a consistent appearance, hide the native input and use a custom button:

1
<label class="file-upload-btn">
2
  <input type="file" name="document" hidden />
3
  Choose file
4
</label>
5
<span id="fileName">No file selected</span>
6

7
<script>
8
  document.querySelector('input[type="file"]').addEventListener("change", (e) => {
9
    const name = e.target.files[0]?.name ?? "No file selected";
10
    document.getElementById("fileName").textContent = name;
11
  });
12
</script>

1
.file-upload-btn {
2
  display: inline-flex;
3
  align-items: center;
4
  padding: 10px 20px;
5
  background: #059669;
6
  color: white;
7
  border-radius: 8px;
8
  cursor: pointer;
9
  font-weight: 600;
10
}
11
.file-upload-btn:hover {
12
  background: #047857;
13
}

Drag and drop file upload

For a modern upload experience, add drag-and-drop support:

1
<div id="dropZone" class="drop-zone">
2
  <p>Drag files here or click to browse</p>
3
  <input type="file" name="document" id="fileInput" hidden />
4
</div>
5

6
<script>
7
  const dropZone = document.getElementById("dropZone");
8
  const fileInput = document.getElementById("fileInput");
9

10
  dropZone.addEventListener("click", () => fileInput.click());
11

12
  dropZone.addEventListener("dragover", (e) => {
13
    e.preventDefault();
14
    dropZone.classList.add("dragover");
15
  });
16

17
  dropZone.addEventListener("dragleave", () => {
18
    dropZone.classList.remove("dragover");
19
  });
20

21
  dropZone.addEventListener("drop", (e) => {
22
    e.preventDefault();
23
    dropZone.classList.remove("dragover");
24
    fileInput.files = e.dataTransfer.files;
25
  });
26
</script>

Secure file upload handling

File uploads introduce security risks. Follow these practices:

Validate MIME types server-side

Do not trust the file extension or the Content-Type header sent by the browser. Check the actual file content (magic bytes) on the server.

Scan for malware

Uploaded files can contain malware. Use a form backend that scans files before storing them.

Limit file sizes

Set maximum file size limits to prevent denial-of-service attacks through large uploads.

Restrict allowed types

Only accept the file types your form actually needs. Do not allow executable files (.exe, .sh, .bat).

Store files securely

Store uploaded files outside the web root or in cloud storage with signed URLs. Never serve uploaded files directly from a public directory.

AJAX file upload with progress

For a better user experience, upload files via AJAX with a progress indicator:

1
document.querySelector("form").addEventListener("submit", async (e) => {
2
  e.preventDefault();
3
  const form = e.target;
4
  const formData = new FormData(form);
5

6
  const xhr = new XMLHttpRequest();
7
  xhr.open("POST", form.action);
8

9
  xhr.upload.addEventListener("progress", (e) => {
10
    if (e.lengthComputable) {
11
      const percent = Math.round((e.loaded / e.total) * 100);
12
      document.getElementById("progress").textContent = `${percent}%`;
13
    }
14
  });
15

16
  xhr.addEventListener("load", () => {
17
    if (xhr.status === 200) {
18
      document.getElementById("status").textContent = "Upload complete.";
19
    } else {
20
      document.getElementById("status").textContent = "Upload failed.";
21
    }
22
  });
23

24
  xhr.send(formData);
25
});

Summary

To add file upload to an HTML form, set enctype="multipart/form-data" on the form element and add an <input type="file"> with appropriate accept restrictions. Validate file types and sizes on both the client and server side. Use a form backend service that supports file uploads, MIME validation, and malware scanning for secure handling.

How to add file upload to an HTML form