I have an Ajax request that uploads an image to the Imgur API, and I need to show the user a progress bar while the upload happens, I followed the instructions available in this thread but it only shows 1 and doesn't work after that. this is the code I'm currently using
var settings = { "xhr": function(){ var xhr = new window.XMLHttpRequest(); //Upload progress xhr.upload.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; ("#progressbar").html"percentComplete) ("#progressbar").css("width",precentComplete) //Do something with upload progress console.log(percentComplete); } }, false); //Download progress xhr.addEventListener("progress", function(evt){ if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; //Do something with download progress console.log(percentComplete); } }, false); return xhr; }, "async": true, "crossDomain": true, "url": "https://api.imgur.com/3/upload", "method": "POST", "headers": { "Authorization": "Client-ID <client-id>", "cache-control": "no-cache", }, "processData": false, "contentType": false, "mimeType": "multipart/form-data", "data": form } $.ajax(settings).done(function (response) { console.log(response); let json = JSON.parse(response) $("#prd-url").val(json.data.link) $("#prd-image").html("Change Image"); $("#submit-prd-btn").attr("disabled",false); }); #button { width: 100%; background-color: #ddd; } #progressbar { width: 1%; height: 30px; background-color: #4CAF50; } <div id="button"> <div id="progressbar"></div> </div> Is there any way to show a progress bar till the file is uploaded, I need a percentage-based progress bar. The maximum image size allowed to upload is 2mb, I tried uploading a 1.8mb and 200kb image both sent 1 as soon as the Ajax call was sent, but the response was sent for the Ajax call after like a 2-second delay
