Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show File Saveas Dialog in Blazor Server App

Tags:

html

blazor

I am new to Blazor and trying to show File Saveas Dialog as shown in following link on a button click. Save as Image

The requirement is - upon clicking the Saveas button above Saveas dialog should be popped up where user can choose the destination of file and file name.

I have tried "enabling the setting to check the save location in the download settings of the browser" and it works. But we do not want to depend on the Browser settings.

Please add your thoughts on below..

  1. Instead of depending on the browser settings is there any other way to show Saveas dialog?

  2. Are there any open source Nuget packages available to help on this?

NOTE: I am using .NET 6.0 for building my application

Thanks in advance,

Bhargavi Gowri.

like image 519
Bhargavi Avatar asked Nov 01 '25 17:11

Bhargavi


2 Answers

This isn't a Blazor thing. In web browsers, files are downloaded from links using <a> tag in HTML using the download attribute. Just create a link to your file:

<a href="path_to_file" download>Save</a>
<a href="link_path_to_file" download="suggested_name">Save</a>

The path must be on the same server, but blob and data links will work as well.

If you do not suggest a name, the browser will use the original filename (possibly changed to remove symbols the OS doesn't allow in file paths).

https://caniuse.com/download

If you want your link to look like a button, then that's a different issue, and you can google or ask that.

like image 52
Bennyboy1973 Avatar answered Nov 04 '25 08:11

Bennyboy1973


I also wanted to bring up a window to save a file in which the user could select a folder. Before that, the system automatically saved to the Downloads folder.

As I understood, there was no such possibility before, but now it is possible thanks to this api: https://caniuse.com/native-filesystem-api.

I found this solution in the answer to this question: https://stackoverflow.com/a/70001920/16740180.

It's worth noting that I use Blazor WebAssembly and not a Blazor Server. And I do not know if it will work for you.

Unfortunately, this doesn't work for mobile devices right now, but it works fine for windows. I hope this helps someone.

like image 44
dstankovskii Avatar answered Nov 04 '25 07:11

dstankovskii



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!