dynamic file upload progress Vanilla JS 

/* usage: make sure to change action="your_url/post" Upload a file 0% */ const fileInput = document.getElementById('file'); const uploadBtn = document.getElementById('upload-btn'); const progressBar = document.getElementById('progress-bar'); const progressLabel = document.getElementById('progress-label'); const form = document.getElementById('upload-form'); uploadBtn.addEventListener('click', () => { const file = fileInput.files[0]; if (!file) return alert("Please select a file."); const payload = new FormData(); payload.append('user-image', file); fetchWithProgress(form.action, payload, percentComplete => { progressBar.value = percentComplete; progressLabel.textContent = `${Math.round(percentComplete)}%`; }).then(response => { if (response.ok) return response.json(); throw new Error(response.statusText); }).then(data => console.log(data)) .catch(error => console.error('Error:', error)); }); const fetchWithProgress = (url, body, onProgress) => new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('POST', url); xhr.upload.onprogress = event => { if (event.lengthComputable) onProgress((event.loaded / event.total) * 100); }; xhr.onload = () => (xhr.status >= 200 && xhr.status < 300) ? resolve({ ok: true, status: xhr.status, statusText: xhr.statusText, json: () => JSON.parse(xhr.responseText) }) : reject({ status: xhr.status, statusText: xhr.statusText }); xhr.onerror = () => reject({ status: xhr.status, statusText: xhr.statusText }); xhr.send(body); });