Blazor Wasm - JS : One button to download multiple files

Question

I'm trying to make a button to download multiple images in a Blazor webassembly .NET 6 app.

So I've made a button :

<button class="btn icon-download" @onclick=DownloadImages></button>

And my method :

private async Task DownloadImages()
{
    int i = 0;
    foreach (var p in Pictures)
    {
        // TODO : needs to take the same extension
        await jsRuntime.InvokeVoidAsync("downloadFromUrl", p.Url, $"picture-{i++:00}.jpeg");
    }
}

Which call the following javascript function :

function downloadFromUrl(url, filename) {
    
    // Create the <a> element and click on it
    const a = document.createElement("a");
    a.href = url;
    a.download = filename;
    a.target = "_self";

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    console.log(url, ' downloaded to ', filename);
}

I have 2 issues :

• First, when I click on the button, all the downloads are cancelled, except the last one => Do I need to wait the download finished ? How could I do that in Javascript ?
• Second, once downloaded, the image name doesn't change and keeps the name from the URL. How can I rename it when saving in Download user folder ?