Progressbar in JS

Question

I have a division html as

<div id="download-progress"></div>

I want to show progress of my file upload in it with a js function progress(), which runs on Click. I have used following form for the file upload.

<form id="myform" name="myform" enctype="multipart/form-data" target="hiddenFrame" method="post">

These files may be coming in zip format which I unzip, then read metadata and then append them to a list. It gets nodes by tag name to append to the data. I simply want a progress bar which tell me how much % of files have been uploaded. I can give you more information if you ask for. Currently I tried using following code for the same but It did not provided me upload percentage on my file upload in IE11.

function progress() {
  var elem = document.getElementById("myBar");   
  var width = 10;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++; 
      elem.style.width = width + '%'; 
      elem.innerHTML = width * 1  + '%';
    }
  }

}

How can I show file uploads in all modern browsers?

But did it work at all in IE11? I mean maybe you have a problem with CSS that makes it display width incorrectly. It would be perfect if you could provide us with the complete example of code with styles so we could test and troubleshoot it. — Telion, Dec 01 '17 at 18:54
Yes, it did worked in ie11 but the progress percentage was not showing. — Sam Joeseph, Dec 01 '17 at 18:57

score 0 · Answer 1 · answered Dec 01 '17 at 19:06

0

The innerHTML property has some problems in IE when trying to add or update form elements

Link

answered Dec 01 '17 at 19:06

SteveM

1
2

You are correct about innerhtml problems with ie, I did changed it but then too it was not working, so shifted as Telion said and it seems close to what I need but yet not upto what I exactly need. – Sam Joeseph Dec 01 '17 at 19:18

score 0 · Accepted Answer · answered Dec 01 '17 at 19:08

First of all, I don't know what your code supposed to do but I can guess that you are uploading some file and want to create a progress bar for it. You are doing this wrong simply changing the value with a timer because the file may be still uploading and user may have already left the page without letting it finish. To avoid this we usually use AJAX upload with listener for progress event:

xhr: function() {
   var xhr = new window.XMLHttpRequest();
   xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
         var percentComplete = evt.loaded / evt.total;
         //Do something with upload progress here
      }
}, false);

To avoid problem with IE11 you need to fix problem with innerHTML for IE, source.

var container = document.getElementById("mainForm:table_1").parentNode;
var content = container.innerHTML
container.innerHTML= content;

For your example it should be:

var elem = document.getElementById("myBar").parentNode;

Progressbar in JS

2 Answers2