HTML file input: accept, multiple, capture and size checks

Why does a file input let through files you did not ask for?

You set accept=".pdf", a visitor sends a photo, and your inbox gets something you cannot open. That is not a bug in your form. Every attribute on a file input is advice to the browser's picker. None of them inspects the file, and a file that reaches the input some other way skips the picker entirely.

To see how far that goes, on 3 November 2026 we handed real files from disk to file inputs in the three browser engines that matter: Chromium (Chrome, Edge), Firefox and WebKit (Safari). Then we posted them to a local copy of Formgong's form backend to see what a server gets. This page covers the input element itself. The whole upload setup, from storage to email links, is in our guide to the contact form with file upload.

What do accept, multiple and capture do?

Here are the three inputs most forms need. The labels matter: a file input's button text comes from the browser, so the label is the only place to say what you want and how big it may be. Our accessible contact form checklist starts with a visible label for every field.

<!-- One PDF, required -->
<label for="cv">Your CV (PDF, up to 5 MB)</label>
<input id="cv" name="cv" type="file" accept=".pdf,application/pdf" required>

<!-- Several photos -->
<label for="photos">Photos of the damage</label>
<input id="photos" name="photos" type="file" accept="image/*" multiple>

<!-- On a phone, open the back camera straight away -->
<label for="snap">Take a photo of the receipt</label>
<input id="snap" name="receipt" type="file" accept="image/*" capture="environment">

How strict is each attribute?

accept takes extensions (.pdf), exact types (application/pdf) or a family (image/*). List both the extension and the type, because some systems match one and some the other. The picker uses it to grey out other files. Files that reach the input another way are not filtered: our test tool put a .csv, an .HEIC and a file with no extension into an input with accept=".pdf,application/pdf", and all three engines took them.

multiple is a plain on or off switch. In our test all three engines held 3 of 3 files in the input's files list. There is no attribute for a maximum count, so a limit of three is something your script and your server enforce.

capture="environment" asks for the back camera and capture="user" for the front one. It only does something on phones. None of the three desktop engines we ran exposes it as a property; they keep the attribute in the HTML and do nothing with it. We did not test a phone, so treat camera behaviour as unverified here and try it on the devices your visitors use.

Can the browser tell what kind of file it is?

No. The browser fills file.type from the file name, not from the bytes. That is why a type check in JavaScript does not stop a renamed file:

The renamed GIF was a PDF to every engine. The iPhone photo got three different answers, and Chromium gave none. If you filter by file.type in the browser, an HEIC photo from an iPhone can fail in Chrome and pass in Safari. Filter by extension if you must filter in the browser, and leave the real decision to the server.

How do you check the file size before upload?

There is no max-size attribute. Read file.size (in bytes) when the visitor picks a file and set a custom validity message. That way the browser's own form checks block the submit and show your text, the same way they do for an empty required field.

In our test a 6 MiB PDF made reportValidity() return false in 3 of 3 engines, and each showed the message from the script. Use the same limit as your server, so the visitor hears about it before a long upload instead of after it.

<script>
  var MAX_BYTES = 5 * 1024 * 1024; // 5 MB, the same limit as your server
  document.getElementById("cv").addEventListener("change", function (event) {
    var input = event.target;
    var file = input.files[0];
    // An empty message means "valid"; any text blocks the submit and is shown by the browser.
    input.setCustomValidity(file && file.size > MAX_BYTES ? "This file is over 5 MB. Please pick a smaller one." : "");
  });
</script>

Why does the value say C:\fakepath?

Read input.value after picking a file and you get C:\fakepath\cv-oliver-bennett.pdf, even on Linux and macOS. We saw exactly that string in all three engines. Browsers hide the real folder to keep your file system private, and the fake prefix is a leftover kept so old scripts do not break. Use input.files[0].name when you want the name.

Two more things trip people up. files is read-only, so you cannot splice one file out of it; you build a new list. And setting value to an empty string is the one change you may make to the value, which clears the input. In our run, removing the second of three files left a.png,c.png and clearing left 0 files, in every engine.

// FileList is read-only. To drop one file, build a new list without it.
function removeFile(input, index) {
  var list = new DataTransfer();
  Array.from(input.files).forEach(function (file, i) { if (i !== index) list.items.add(file); });
  input.files = list.files;
}

// To clear the input completely:
input.value = "";

What happens if the form has no enctype?

The form looks like it works and the file never arrives. Without enctype="multipart/form-data" the browser sends the form as URL-encoded text, and a file input in that format contributes only its file name. We tried both versions against our local backend with the same PDF:

The first row is the classic silent failure: no error anywhere, a submission in the inbox, and a file name where the file should be. With fetch you avoid it by passing new FormData(form) as the body and leaving the Content-Type header alone, so the browser can add the multipart boundary. How the parts look on the wire is in how HTML forms work at a low level.

How do you send the file to a form backend?

Point the form at a backend that stores files, keep the method POST and the enctype multipart. With Formgong that is the form below. Turn on attachments in the form settings and add Cloudflare Turnstile, because a post with a file always needs a solved Turnstile check there, even on forms that do not ask for one on text. The settings are in the HTML form docs.

Formgong takes PDF, PNG and JPEG, up to 3 files, 5 MiB each and 10 MiB together in a plain form post. If you need the file to land somewhere else as well, the webhook docs show the attachment links the payload carries.

<form action="https://formgong.com/submit" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name" required>
  <label for="cv">Your CV (PDF, up to 5 MB)</label>
  <input id="cv" name="cv" type="file" accept=".pdf,application/pdf" required>
  <div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY"></div>
  <button type="submit">Send</button>
</form>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

Where does Formgong check more than other form backends?

On the server, Formgong checks three things before it keeps a file: the extension, the type the browser claimed, and the first and last bytes of the file itself. That is how the renamed GIF above came back as file_type while every browser had called it a PDF. Formspree's guide to the HTML file input tells readers to validate types and sizes on the server, but it does not say what Formspree itself checks. The Static Forms article on accept, dated 20 October 2026, says its own documentation states the service does not enforce file-type validation. Both pages were read on 3 November 2026. The other side of the trade is that Formgong accepts only three file types, so a form that needs Word documents or ZIP files is better served elsewhere.

Did a file input behave differently for you?

If a phone opened the wrong camera, or a browser we did not test reported a different type, write to support@formgong.com with the device and the file name. We will add it to the table, with your permission.