React File Upload with Progress Bar

Upload files in React with a progress bar using XMLHttpRequest and FormData. Supports drag-and-drop, multiple files, file type validation, and upload.

Typescript React File Upload Updated: 2026-01-15

Code

snippet

import { useState, useRef } from 'react';

export function FileUpload({ url, accept }: { url: string; accept?: string }) {
  const [progress, setProgress] = useState(0);
  const xhrRef = useRef<XMLHttpRequest | null>(null);

  const upload = (file: File) => {
    const formData = new FormData();
    formData.append('file', file);
    const xhr = new XMLHttpRequest();
    xhrRef.current = xhr;
    xhr.upload.onprogress = (e) => {
      if (e.lengthComputable) setProgress(Math.round((e.loaded / e.total) * 100));
    };
    xhr.open('POST', url);
    xhr.send(formData);
  };

  const cancel = () => xhrRef.current?.abort();

  return (
    <div>
      <input type="file" accept={accept} onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])} />
      <progress value={progress} max={100} />
      <button onClick={cancel}>Cancel</button>
    </div>
  );
}