Ajax request with progress bar

Question

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

there is no connection between your ajax code and html progress bar. can u post the html code too. — Ramyz, Jan 01 '20 at 07:07

score 1 · Answer 1 · answered Jan 01 '20 at 09:39

Update the xhr function like this

xhr: function() {
    var xhr = new window.XMLHttpRequest();
    var progressBar = $("#progressbar");
    //Upload progress
    xhr.upload.addEventListener("progress", function(evt) {
        if (evt.lengthComputable) {
            var percentComplete = (evt.loaded/evt.total)*100;
            percentComplete = Math.floor(percentComplete);
            console.log(percentComplete);
            progressBar.css("width", percentComplete + "%");
            progressBar.html(percentComplete+'%');
        }
    }, false);
return xhr;
},

and also do the same for download.

score 0 · Answer 2 · answered Jan 01 '20 at 09:30

0

Add there something like:

$('#progressbar').css('width', (percentComplete * 100) + '%');

It will update the width of the progress bar.

answered Jan 01 '20 at 09:30

JohnnyJS

1,320
10
21

Ajax request with progress bar

2 Answers2