Click here to Skip to main content
15,844,602 members
Please Sign up or sign in to vote.
5.00/5 (2 votes)
See more: , +
I am new to website programming and I am confused by the different option I have read on this topic. So, I would like to just ask the question very simplistically and make sure I am approaching this correctly.

Task
I am hosting a Blazor web application using WinHost hosting and I would like to add a button to my webpage that will allow users to click and download a file.

Questions
1. Where should I put the file that I want users to be able to download?
2. What security concerns and best practices should I be thinking about?
3. Finally, WinHost has a provided FTP site I can use with my account. Is that required or can I use HTTP...etc?

What I have tried:

@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 = "ftp.mysite.com/Downloads/MyFile.zip";
        await JS.InvokeVoidAsync("triggerFileDownload", fileName, fileURL);
    }
}
Posted

1 solution

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 -
markdown
- 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 -
C#
@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 -
HTML
<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.
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900