What is the correct way to add a downloadable file link to a blazor web app

Quote:

1) Where should I put the file that I want users to be able to download?

You should store downloadable files in a directory that is not directly accessible from the web. In a 'Blazor' app, you should normally create the folder named 'wwwroot' in your project, and then create a subfolder like 'downloads' within it. Place your files there. This ensures that users can only access your files through controlled endpoints.
Your directory structure should then look similar to -

- YourProject
  - wwwroot
    - downloads
      - MyFile.zip

You can create a folder in the root by code if you do not have access to your server - How to create a folder in wwwroot by coding[^]

Quote:

2) What security concerns and best practices should I be thinking about?

This is a totally different discussion on its own but below is the basics -
-Ensure that only authenticated and authorized users can access your download functionality.
-Validate the file name and URL parameters you use to prevent directory traversal attacks.
-Avoid using user inputs directly as file names to prevent malicious file naming.
-Always serve your site over HTTPS to encrypt the data during transit.

Quote:

3) WinHost has a provided FTP site I can use with my account. Is that required, or can I use HTTP, etc.?

You can serve files for download over HTTP directly from your web server. You do not necessarily need to use FTP for this purpose. The key is to set up your server to handle file downloads securely. In your case, you are using 'WinHost', and you should be able to configure it to serve files over HTTP.

You can modify your code to trigger a file download over HTTP when a user clicks on your button -

@page "/"
@inject IJSRuntime JS
<PageTitle>Index</PageTitle>

<h1>Welcome to the test app</h1>

<button @onclick="DownloadFileFromURL">
    Download File From URL
</button>

@code {
    private async Task DownloadFileFromURL()
    {
        var fileName = "MyFile.zip";
        var fileURL = "https://www.yoursite.com/downloads/MyFile.zip";
        await JS.InvokeVoidAsync("triggerFileDownload", fileName, fileURL);
    }
}

You will need to use the JavaScript function 'triggerFileDownload' to handle the download on the client side. You can include this script in your '_Host.cshtml' or in the page where the download is triggered -

<script>
    window.triggerFileDownload = function (fileName, fileURL) {
        var anchor = document.createElement('a');
        anchor.href = fileURL;
        anchor.download = fileName;
        anchor.click();
    }
</script>

Using the above you will dynamically create an 'a' element with the specified 'href' and download attributes and triggers a click event on it, initiating the download.