Client side file uploads using FormData fetch and XMLHttpRequest with progress

If you ever wondered how to send a file from a browser to a server without summoning sacrificial goats this guide is for you. We will cover the minimal HTML you need the JavaScript to manage files and a friendly progress UI that does not judge you for large video files.

Minimal form and why FormData matters

Keep the markup tiny so debugging does not feel like archaeology. FormData will handle the messy multipart formdata encoding for you so you never have to worry about boundaries or other things that sound like plumbing.

<form id="uploadForm" enctype="multipart/form-data" method="post">
  <input type="file" id="fileInput" name="file" />
  <button id="uploadBtn" type="button">Upload</button>
  <progress id="progress" value="0" max="100"></progress>
</form>

Grab the file and validate it

Listen for user input and do quick client side checks to avoid wasting bandwidth and user patience. Always assume the server will still enforce limits and sanitize filenames. The client is just trying to be polite.

const fileInput = document.getElementById('fileInput')
const progress = document.getElementById('progress')
const uploadBtn = document.getElementById('uploadBtn')

uploadBtn.addEventListener('click', () => {
  const file = fileInput.files[0]
  if (!file) return alert('Pick a file first')
  // example size check 10 MB
  if (file.size > 10 * 1024 * 1024) return alert('File too big')
  // basic mime whitelist
  const allowed = ['image/png', 'image/jpeg', 'application/pdf']
  if (allowed.indexOf(file.type) === -1) return alert('File type not allowed')
  // proceed to upload
})

Upload with XMLHttpRequest and show progress

If you want a simple progress bar that actually works use XMLHttpRequest and its upload progress events. Fetch is nicer for simple posts but does not have a built in upload progress event in most browsers yet.

uploadBtn.addEventListener('click', () => {
  const file = fileInput.files[0]
  if (!file) return
  const formData = new FormData()
  formData.append('file', file)

  const xhr = new XMLHttpRequest()
  xhr.open('POST', '/upload')

  xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
      progress.value = (e.loaded / e.total) * 100
    }
  }

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      alert('Upload complete')
    } else {
      alert('Server error: ' + xhr.status)
    }
  }

  xhr.onerror = function() {
    alert('Network error happened')
  }

  xhr.send(formData)
})

Using fetch when you do not need progress

Fetch is cleaner for straightforward uploads and modern code. If you just want to POST the file and react to the response use fetch but remember it has less mature upload progress support compared to XMLHttpRequest. Always check the server response and show a helpful message rather than cryptic status codes.

Server side checklist

• Enforce maximum file size on the server
• Validate MIME type and file content where possible
• Sanitize filenames and avoid saving user input directly
• Return clear JSON responses so the client can be graceful

Tips for large files and resumable uploads

If your users are uploading giant pain in the neck files consider chunked uploads and resume logic. Show ETA and progress per chunk so users do not assume the internet fell into a black hole. On the server side keep atomic writes and checks to avoid corrupted uploads.

Quick recap

Build a tiny form capture the file with change or click events validate size and type use FormData to handle multipart formdata and choose XMLHttpRequest when you need progress or fetch for cleaner code. Do server side checks and always return helpful responses so nobody blames JavaScript for everything.