HTML form file upload

Form controls the markup will hold
8
Label elements, one bound to each control
8
Fieldset and legend pairs around the choice groups
1

The counts these tools work out come from the structure the HTML standard defines for a form: one labelled control per field, a fieldset and a legend around a group of radios or checkboxes, and a name attribute on every control that is meant to be submitted. The sources under each tool link the part of the specification each rule comes from.

A form that takes a file needs one attribute most people forget. The file input itself is simple enough, but unless the form carries enctype="multipart/form-data" the browser sends the file's name and none of its contents, and the failure is silent: the request succeeds, the field arrives, and the file is not there. Add the enctype, keep the method as post, and decide what you will accept before the upload rather than after.

Open the HTML form generator Free to use. No account, no card, no trial clock.

Put the enctype on the form, not the input

enctype="multipart/form-data" belongs on the form element, and without it a file input sends the filename and none of the bytes. This is the failure that wastes an afternoon, because nothing goes wrong: the browser posts, the server answers, the field is present, and the file simply is not there. If a form has any file input at all, it needs the enctype and it needs method="post", because a GET cannot carry a file body.

Say what you accept, and know that saying it changes nothing

accept filters the file picker so somebody choosing a CV is not scrolling past photographs, and multiple lets one field take several files under the same name. Both are usability, and neither is enforcement: the picker can be bypassed and a script can post any bytes it likes at your action URL. Decide the real limit on type and size where the upload lands, and decide it before you ship, because the first surprise is normally a 40 megabyte photograph from a phone.

Work out where the file is going to live

A file is not a form value; it is an object that has to be stored somewhere, kept next to the submission it came with, and served back safely when somebody wants it. Email is a poor answer, because attachments get stripped, size limits bite and nothing is searchable a year later. Whatever receives the post needs somewhere to put the bytes and a record that ties them to the rest of the submission. On the worked example, adding a single file field takes the form from 8 controls to 9 and the named values from 6 to 7.

Will the HTML form file upload write the markup you need?

Tell us what the form has to do and we will tell you whether Endpointo can catch it.

Send it

Writing the HTML form file upload: what developers ask

Why does my upload arrive empty? Almost always the enctype. Without enctype="multipart/form-data" on the form element the browser encodes the field as ordinary form data, which for a file input means the filename and nothing else. The request looks fine, so nothing tells you until somebody opens the attachment.

Does the accept attribute stop the wrong file being uploaded? It filters what the file picker shows, which is a real usability win, and it stops nothing. A person can pick any file and a script can post anything at all, so whatever receives the upload has to check the type and the size itself.

Can one field take several files? Yes, add the multiple attribute to the file input and the picker will allow more than one. Each file is sent as its own part of the request under the same field name, so whatever receives it has to expect a list rather than a single value.

Endpointo Pro

Where the submission goes next

The markup is only half a working form. Point its action at Endpointo and the posts start arriving in your inbox, with every submission and its uploads kept in one place you can search and export.

  • Download the files somebody uploaded with the form
  • Send notification emails without our name on them
  • Come back to a form and its submissions tomorrow
  • Put your own logo and reply-to address on the notifications
  • Export every submission a form has ever received
  • Send the notification email to more than one address
  • Connect Stripe when a form needs to take a payment
  • Push submissions into the tools you already run

$19per month, whole team

Start Endpointo Pro Pricing

Endpointo Pro is $19.00 per month. It renews automatically each month at the same price until you cancel, and the price and the renewal date are shown on the checkout page before you pay.

Get an endpoint for this formPoint this form at Endpointo