Progress bar for zipping process

[davejack1]

Inside a for loop I create the files to be put into the zip. However, this is happening inside another asynch function, since I need a font file to generate my model.

loadFont().then(function(font){
    shape = generateShape(font);

    for(var a=0; a < name.length; a++)
    {
         zip.file("DXFs/" + name[a] + ".dxf", toDXF(shape));
         width = a*max;
         element.style.width = width + '%';
         console.log(a*max);
    }

    zip.generateAsync({type: "blob"}).then(function (blob)
     {
         saveAs(blob, "Files.zip");
     });

});

I see the file generating progress in the console log. However, I want to show this on the page as a change of a div, just like a progress bar.

However, the progress bar jumps from 0% to 100% once the zip file is ready and the download prompt is shown.

How can I manipulate the div's width as the files to be zipped are being generated?

[dduponchel]

This happens because your for-loop doesn't wait and goes from 0 to 100% before calling zip.generateAsync.

In your case, you should use the onUpdate callback:

for(var a=0; a < name.length; a++) {
  zip.file("DXFs/" + name[a] + ".dxf", toDXF(shape));
}

zip.generateAsync({type: "blob", streamFiles: true}, function updateCallback(metadata) {
  element.style.width = metadata.percent + '%';
})
.then(function (blob) {
  saveAs(blob, "Files.zip");
});

Check out this example and its source code.

Does this solve your issue ?

[davejack1]

Thanks for the answer.

However, my problem is still there. With the method I tried, I could see the progress in the console.

I added the console.log(metadata.percent) inside the updateCallback

Now I see nothing in the console when I hit the save button. After a while before the save prompt window appearing I see the progress in the console quickly also the change of the DIV's width.

That's probably because the for loops takes a long time to be finished rather than the time spent on zip.generateAsync

Either I need web worker or divide the for loop into chunks with setTimeout

[dduponchel]

That's probably because the for loops takes a long time to be finished rather than the time spent on zip.generateAsync

You can check it with console.time/console.timeEnd or with js profilers.

Either I need web worker or divide the for loop into chunks with setTimeout

#346 would help here. In mean time... yeah, it looks like it.

[jawandsingh]

Thanks for the answer.

However, my problem is still there. With the method I tried, I could see the progress in the console.

I added the console.log(metadata.percent) inside the updateCallback

Now I see nothing in the console when I hit the save button. After a while before the save prompt window appearing I see the progress in the console quickly also the change of the DIV's width.

That's probably because the for loops takes a long time to be finished rather than the time spent on zip.generateAsync

Either I need web worker or divide the for loop into chunks with setTimeout

@davejack1 did you find any solution for it?

[xiesantao]

Long time no return to progress, you found a solution?