Handling multiple promises to get the total progress of multiple file downloads

Question

I'm trying to download multiple files using react-native-fs library and show the progress of the download to the user. For a single file download It can be use as the following code.

let fileSize = null;
let downloadedSize = null;
let progress = null;

RNFS.downloadFile({
  fromUrl: 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4',
  toFile: `${RNFS.DocumentDirectoryPath}/download.mp4`,
  begin: ({jobId, contentLength}) => { fileSize = contentLength; },
  progress: ({jobId, bytesWritten, contentLength}) => {
    downloadedSize = bytesWritten;
    console.log("progress", downloadedSize / fileSize);
  },
});

For multiple file downloads I'm trying to use the same function with a for of loop. But was not able to get the progress correctly. The progress values are displayed like this

0,10,20,30,40,50,60,70,80,90,50,60,70,80,90,80,90,100

The values are going back and forth. Following is the my code

const files = [
  'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4',
  'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_640_3MG.mp4',
  'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1280_10MG.mp4',
  'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1920_18MG.mp4',
];

const promises = [];
let jobs = [];
let index = 1;

for (const file of files) {
  const promise = RNFS.downloadFile({
    fromUrl: file,
    toFile: `${RNFS.DocumentDirectoryPath}/download_${index}.mp4`,
    begin: ({ jobId, contentLength }) => {
      jobs.push({ jobId, contentLength, progress: 0 })
    },
    progress: ({ jobId, bytesWritten, contentLength }) => {
      jobs = jobs.map((job, index) => {
        if (jobId === job.jobId) {
          jobs[index].progress = bytesWritten;
        }
        return job;
      });
      const totalDownloadSize = jobs.reduce((total, current) => total + current.contentLength, 0);
      const currentDownloadSize = jobs.reduce((total, current) => total + current.progress, 0);
      console.log("progress", currentDownloadSize / totalDownloadSize);
    },
  });
  promises.push(promise);
  index++;
}
Promise.all(promises);

Is there anyway I can get the progress correctly?

Answer 1

I would measure

(currentDownloadSize / totalDownloadSize) * (jobs.length / files.length)

to factor in the not-yet-started jobs.