File uploads in HTML

A file input, the accept filter, and the encoding the form needs.

<form action="/api/import" method="post"
      enctype="multipart/form-data">
  <label for="csv">Results export</label>
  <input type="file" id="csv" name="csv" accept=".csv,text/csv" required>

  <label for="shots">Screenshots</label>
  <input type="file" id="shots" name="shots" accept="image/*" multiple>

  <button type="submit">Upload</button>
</form>

How it works

1. enctype=multipart/form-data is required to post files.
2. accept filters the picker by type or extension.
3. multiple allows more than one file per field.

The run, in numbers

Lines

10

Characters to type

340

Tokens

81

Three-star pace

70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 69 seconds.

Type this snippet

Step 3 of 4 in Numbers, dates & files, step 17 of 25 in Forms & inputs.

← Previous Next →