In this video, I'll guide you through how to
add file upload and download features to a Blazor web app. We'll create a feature that
allows users to upload CSV files to import data into our database. Additionally, we'll add
a download button for users to retrieve all the data in a CSV format. Now, let's begin the
implementation process. I have set up a Blazor web app project for this demonstration.
In the program.cs class, I have included the necessary dependency service for connecting to
a SQL Server database. Within the data folder, you'll find our DBContext class along with an
entity class named product. The product entity class comprises four properties: ID, product code,
product name and price. For those who interested in accessing the final project source code, it
is available on our Patreon page. Let's navigate to the products page within our application. As
you can observe, we have incorporated a table to display the list of products. Since there are
no products currently available, it displays no products added. Now we'll proceed to implement the
Import and Export functionalities on this page. To facilitate CSV upload and download, we'll install
a library specialized in handling CSV files. We are installing a library called CSV helper,
renowned for its efficiency in CSV read and write operations. We'll enhance the product class
by adding attributes necessary for CSV read-write operations. Since the ID field isn't required
in the CSV file, we can ignore it. We'll assign a custom CSV column name to the product code
property. Additionally, custom CSV column names will be provided for the product name and price
properties. Let's proceed to the product page razor component. Currently you can view the existing
design and code implemented for displaying the products table. I'll now integrate an input
file element just above the table, enabling users to select a CSV file for import. Additionally,
I'm including a button in the card header to facilitate the download of products. In the code
section, I'm establishing a method named handle file upload which should accept input file change
event arguments as parameter. I'll designate this method for the onchange event of the input file
element. Furthermore, I'm creating another method named download products. Let's associate this
method with the onclick event of the download button. We'll commence the implementation of
the handle file upload method. Firstly we'll verify that e.File is not null. For simplicity,
let's assign that object to variable named file. We can instantiate an object of CSV configuration
specifying invariant culture as the culture info parameter value. Additionally, we'll set the has
header record property to true. However, if your CSV file doesn't require the first row as a header, you
can set it to false. Subsequently, we'll utilize a stream reader to open and read the stream from the
file. At this point we can assign the max allowed size parameter if necessary. By default it will
only allow 500 KB. If you need to upload larger files, you can assign the maximum allowed size. We
need to specify the size in bytes. I'm providing a value that is approximately 2 MB. Additionally, we
can utilize CSV reader providing the stream reader and culture info as parameters. Now we can retrieve
the products using the GetRecordsAsync method of the CSV reader object. Having obtained the list of
products, let's add them to the database using the AddRangeAsync method. Subsequently, we'll save the
changes using the SaveChangesAsync method. To ensure the table data is refreshed, we'll reload
the products. Furthermore, I'll display an alert message using JsRuntime. For further information
on JsRuntime and other Blazor components, you can refer to our Blazor tutorial playlist. The URL is
available in the video description. Let's proceed with implementing the download functionality.
Similarly we can create the CSV configuration object. Next I'm utilizing a memory stream object.
Then I'll create a text writer object by providing the memory stream as the parameter. We'll use
the CSV writer next, providing the text writer and CSV configuration as parameters. Afterward,
let's utilize the CSV writer's WriteRecordsAsync method to convert the list of products to
CSV content. Following that, we can flush the text writer. Subsequently, we'll set the current position
of the memory stream to the beginning using the seek method. Next, we can create an object of the
dotnet stream reference using the memory stream. Then using the JsRuntime we'll invoke a JavaScript
method named download file stream. Currently this JavaScript method does not exist. But we'll
create it shortly. We'll also pass the file name and the stream reference as parameters. In the app.razor
component, let's define the JavaScript method. we'll name it download file stream. Matching
the name provided in the download function. It should accept the file name and the CSV content
stream reference as parameters. You can simply copy the script from the source code available
on our Patreon page. Here we are creating a blob object and initiating a client side download.
The Blob data will be temporarily stored in the client browser. Let's execute the application
and evaluate the functionalities. On the products page, you'll now notice the presence of upload and
download options. Let's proceed to test the upload functionality by attempting to upload a file.
I prepared two CSV files for testing purposes. Let's proceed by uploading the first file and
you'll notice an alert message confirming the successful input. The added products are now
populated in the table. Here is the content of the CSV file we have just uploaded. Additionally,
I'll showcase the data in SQL management Studio where you can see all the five products now.
Let's proceed to upload the second file. Once again, we received a successful alert message and
the products are added to the table. These are the three records we have uploaded now. Let's proceed
to test the download functionality. You will find that the CSV file has been successfully downloaded.
Now let's attempt to open it in Excel. Upon opening, you'll observe that all the products we uploaded
are displayed in the CSV file. I hope you now have a clear understanding on how to implement file
upload and download functionality in a blazor web app. If you found this video helpful, please
consider liking, sharing and subscribing to the channel. Thank you for watching and I look forward
to seeing you all in the next video. Happy coding!
