How do I modify the following code, to get async function work as expected in a for loo

Question

In the following code, from the first console.log I can see the result filename changes each iteration. However, the second console.log always give the last result filename. How do I make the filename in the second console.log change with the iteration?

for (clipIndex = 0; clipIndex < unrollWordCounts(getAllWantedWords()).length; clipIndex++) {
        try {
          var clip = allClips[clipIndex];
          clip.style.display = 'None';
          var audioBlobUrl = clip.querySelector('audio').src;
          var word = clip.querySelector('p').innerText;
          var filename = word + '_' + Date.now() + '.ogg';
          console.log(filename);//first console.log
          fetch(audioBlobUrl).then(r => r.blob()).then(blob => {
            var fr = new FileReader;
            fr.onload = f => {
            var obj = {data: [...new Int8Array(f.target.result)], mimeType: blob.type,filename};
            console.log(filename);//second console.log
           google.script.run.withSuccessHandler(onSuccess).uploadFiles(obj);
            };
            fr.readAsArrayBuffer(blob);
          });
        }
        catch (err) {
          console.log(err);
        }
      }