About the HTML File Input Generator
A file field only works inside a form carrying enctype="multipart/form-data" and method="post". Miss the enctype and the browser posts the file name as a plain string, the bytes never leave the machine, and the server reports an empty upload with no clue why. Tick the wrapper option here and you get a correct form around the input.
The accept attribute pre-filters the operating system file chooser. It takes extensions such as .pdf,.docx, exact MIME types such as application/pdf, or wildcards such as image/*. Treat it purely as a convenience: the dialog usually offers an all files option anyway, and a file can be renamed, so every real check belongs on the server. Adding multiple lets one field carry several files, and the generator suffixes the name with [] so the usual server frameworks read them as a list.
On a phone the capture attribute asks for the camera directly instead of the gallery, with environment for the rear lens and user for the front, which suits a document scan or a proof of delivery photo. Note that the value of a file input cannot be set from script for security reasons, so there is no way to pre-fill it or to restore a chosen file after a failed submit. Size limits are not expressible in HTML either; check file.size in JavaScript before submitting. To turn an uploaded picture into a data URL instead of posting it, see Image to Base64.
How to use
- Set the label and the field name.
- List the accepted extensions or MIME types.
- Turn on multiple, required or the camera capture as needed.
- Tick the form wrapper for a complete upload snippet, then copy.
Common questions
- Why does my upload arrive empty?
- The form is almost certainly missing enctype="multipart/form-data". Without it only the file name is posted, never the bytes.
- Does accept stop the wrong file type being chosen?
- No, it only filters the chooser by default. Anyone can switch to all files, so validate the type on the server.
- Can I set a maximum file size in HTML?
- There is no attribute for it. Read file.size in JavaScript before submitting, and enforce the real limit on the server.
- Can I pre-fill a file input?
- No. Browsers block setting the value from script, so a chosen file cannot be restored after a failed submit.