Download multiple files (50mb) blazor server-side

Question

i can't really find a way to download a 100mb zip file from the server to the client and also show the progress while downloading. So how will this look for a normal api controller i can add to my server-side project? if lets say i have 3 files i want to download at 50mb each.

i have tried using JSInterop like this, but this is not showing the progress of the file download, and how will i do if i want to download 3 seperate files at the same time?

try
    {
    //converting file into bytes array  
        var dataBytes = System.IO.File.ReadAllBytes(file);

        await JSRuntime.InvokeVoidAsync(
              "downloadFromByteArray",
              new
              {
                   ByteArray = dataBytes,
                   FileName = "download.zip",
                   ContentType = "application/force-download"
               });
     }
     catch (Exception)
     {
     //throw;
     }

JS:

function downloadFromByteArray(options: {
    byteArray: string,
    fileName: string,
    contentType: string
}): void {

    // Convert base64 string to numbers array.
    const numArray = atob(options.byteArray).split('').map(c => c.charCodeAt(0));

    // Convert numbers array to Uint8Array object.
    const uint8Array = new Uint8Array(numArray);

    // Wrap it by Blob object.
    const blob = new Blob([uint8Array], { type: options.contentType });

    // Create "object URL" that is linked to the Blob object.
    const url = URL.createObjectURL(blob);

    // Invoke download helper function that implemented in 
    // the earlier section of this article.
    downloadFromUrl({ url: url, fileName: options.fileName });

    // At last, release unused resources.
    URL.revokeObjectURL(url);
}

UPDATE:

if im using this code, it will show me the progress of the file. But how can i trigger it from my code? This way does not do it. But typing the url does.

await Http.GetAsync($"Download/Model/{JobId}");

Controller

[HttpGet("download/model/{JobId}")]
        public IActionResult DownloadFile([FromRoute] string JobId) 
        {
            if (JobId == null) 
            {
                return BadRequest();
            }

            var FolderPath = $"xxxx";
            var FileName = $"Model_{JobId}.zip";

            var filePath = Path.Combine(environment.WebRootPath, FolderPath, FileName);

            byte[] fileBytes = System.IO.File.ReadAllBytes(filePath);

            return File(fileBytes, "application/force-download", FileName);
        }

UPDATE 2!

i have got it download with progress and click with using JSInterop.

public async void DownloadFiles() 
        {
            //download all selectedFiles
            foreach (var file in selectedFiles)
            {
                //download these files
                await JSRuntime.InvokeAsync<object>("open", $"Download/Model/{JobId}/{file.Name}", "_blank");
            }
        }

Now the only problem left is.. it only downloads the first file out of 3.

Download multiple files (50mb) blazor server-side

0 Answers0

Linked