Zip up a specific sub folder of the Samples on the Server and Download it to the Client Desktop.

Summary

Control Name: ZipControl
Purpose: Get Folder as Zip file from server, and download it.
Code: ZipComponent.razor_ In djaus2/GetSampleApps on GitHub
Example of Usage <ZipComponent FolderId=@Folder.Id />
Explanation of Example: Zip up the folder specified by the Folder Id, on the Server, and download it to the Downloads folder on the desktop.
Further: The file is transferred from the server as a Base64String.
Nuget Packages No Nuget packages required for this control.
References:  
Microsoft Docs: ToBase64String()
FromBase64String

Folders

As covered previously, there is a list of folders, each with an Id. See the previous post on this To download a folder on the server, the folder Id is submitted using the Http Get mechanism as used to get Text, Image and Markdown files from the server. The difference is that zip file is created on the fly on the server when requested. The download is similar to the Image download in that it is downloaded as a Base64 string.

Client Control Http Get Submission

As covered previously here, this is a parameterised Http Get to the server. The format is

    Zip~<ZipFile name>~<FolderId>

Note that it is a tilde separated list.

For example,

    string path ="Zip~{Folder.Name}.zip~10";
    var strn = await client.GetAsync(ServiceEndpoint + $"/{path}");
    string fileContents = await strn.Content.ReadAsStringAsync();
    byte[] bytes = Convert.FromBase64String(filecontents);
    await FileUtil.SaveAs(JSRuntime, showFilename, bytes);

Note that the Zip file data is returned as a Base64String.

A Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding. Each Base64 digit represents exactly 6 bits of data. Base64 is designed to carry data stored in binary formats across channels that only reliably support text content, such as Html. Wikipedia

Server Response

The Server response is similar to the other Htttp Gets as per here, specifically as for the Image download. The difference is that the binary content has to be generated first.

  1. Get File Path on Server from the Folder Id as per the link immediately above
  2. Create the zip file from folder contents
     string zipPath = Path.Combine(ServerZipFolder,FileName);
     ZipFile.CreateFromDirectory(fpath, zipPath);
    
  3. Get Zip file into a Base64 String and return that
     using (MemoryStream ms = new MemoryStream())
     {
         using (FileStream file = new FileStream(zipPath, FileMode.Open, FileAccess.Read))
         {
             byte[] bytes = new byte[file.Length];
             file.Read(bytes, 0, (int)file.Length);
             ms.Write(bytes, 0, (int)file.Length);
         }
         text = Convert.ToBase64String(ms.ToArray());
         return text;
     }
    

Ancillary Client Function

The Download involves a call to a Javascript. The scripts as detailed below are included within <script>..</scripts> tags within the <head> section on wwwwroot/index.html within the Blazor Client Code. See here

File Download on Client

The Download functionality was based upon Dan Roth’s FileUtil also as referenced above in the Summary. The Button OnClick function as in the Control Code is:

    public static class FileUtil
    {
        public async static Task SaveAsText(IJSRuntime js, string filename, byte[] data)
        {
            await js.InvokeAsync<object>(
            "saveFile",
            filename,
            Convert.ToBase64String(data));
        }
    }

The saveFile Javascript code can be viewed on GitHub here


 TopicSubtopic
  Next: > Blazor How To
<  Prev:   Blazor How To
This Category:Blazor
  Next: > Blazor How To Upload a Zip file. 
<  Prev:   Blazor How To