HTML File Inputs and File API Cheat Sheet

<label for="avatar">Profile image</label>
<input id="avatar" name="avatar" type="file"
       accept="image/png,image/jpeg,.webp"
       aria-describedby="avatar-help" required>
<p id="avatar-help">PNG, JPEG, or WebP; at most 2 MB.</p>

Note: Do not hide the native input in a way that removes it from keyboard or accessibility APIs. A label can provide custom presentation while the input remains operable.

<label for="attachments">Attachments</label>
<input id="attachments" name="attachments" type="file" multiple>

const input = document.querySelector('#avatar');
const message = document.querySelector('#avatar-message');
const allowedTypes = new Set(['image/png', 'image/jpeg', 'image/webp']);
const maxBytes = 2 * 1024 * 1024;

input.addEventListener('change', () => {
  const [file] = input.files;
  if (!file) { message.textContent = 'No file selected.'; return; }

  if (!allowedTypes.has(file.type) || file.size > maxBytes) {
    input.value = '';
    message.textContent = 'Choose a PNG, JPEG, or WebP image no larger than 2 MB.';
    return;
  }
  message.textContent = `${file.name} — ${file.size.toLocaleString()} bytes`;
});

Note: Clearing input.value is allowed; scripts cannot set it to a local filename. File.type can be empty or incorrect, so it is not a security boundary.

const selected = Array.from(input.files);
const totalBytes = selected.reduce((sum, file) => sum + file.size, 0);

async function showText(file, output) {
  if (file.size > 256 * 1024) throw new Error('Text file is too large to preview');
  const text = await file.text();
  output.textContent = text.slice(0, 10_000);
}

Note: Blob.text() always decodes as UTF-8. Use a TextDecoder with an ArrayBuffer when the workflow explicitly supports another encoding.

function readBytes(file, signal) {
  return new Promise((resolve, reject) => {
    if (signal?.aborted) {
      reject(new DOMException('Read aborted', 'AbortError'));
      return;
    }
    const reader = new FileReader();
    const abort = () => reader.readyState === FileReader.LOADING && reader.abort();
    signal?.addEventListener('abort', abort, { once: true });
    reader.addEventListener('load', () => resolve(reader.result));
    reader.addEventListener('error', () => reject(reader.error));
    reader.addEventListener('abort', () => reject(new DOMException('Read aborted', 'AbortError')));
    reader.addEventListener('loadend', () => signal?.removeEventListener('abort', abort));
    reader.readAsArrayBuffer(file);
  });
}

const preview = document.querySelector('#avatar-preview');
let previewURL;

function showImage(file) {
  if (previewURL) URL.revokeObjectURL(previewURL);
  previewURL = URL.createObjectURL(file);
  preview.src = previewURL;
  preview.hidden = false;
}

window.addEventListener('pagehide', () => {
  if (previewURL) URL.revokeObjectURL(previewURL);
});

Note: Decode errors still need handling. Do not treat successful image rendering as proof that a later upload is safe to store or serve.

<form action="/profile/photo" method="post" enctype="multipart/form-data">
  <label for="photo">Profile photo</label>
  <input id="photo" name="photo" type="file" accept="image/png,image/jpeg" required>
  <button type="submit">Upload photo</button>
</form>

const data = new FormData();
for (const file of input.files) data.append('attachments', file, file.name);

const response = await fetch('/api/attachments', {
  method: 'POST',
  body: data,
  credentials: 'same-origin'
});
if (!response.ok) throw new Error(`Upload failed: ${response.status}`);

Note: Do not set Content-Type when sending FormData; the browser adds multipart/form-data with the required boundary. Client validation improves UX but never replaces server validation.