Vanilla JavaScript File Upload

Upload files with vanilla JavaScript using XMLHttpRequest for progress tracking, drag-and-drop support, file type validation, and chunked upload for large.

Javascript File Upload Updated: 2026-01-15

Code

snippet

function uploadFile(file, onProgress) {
  const xhr = new XMLHttpRequest();
  xhr.upload.addEventListener('progress', (e) => {
    if (e.lengthComputable) onProgress((e.loaded / e.total) * 100);
  });
  xhr.open('POST', '/api/upload');
  const formData = new FormData();
  formData.append('file', file);
  xhr.send(formData);
  return new Promise((resolve, reject) => {
    xhr.onload = () => resolve(JSON.parse(xhr.responseText));
    xhr.onerror = () => reject(new Error('Upload failed'));
  });
}