Uploading Files with Blazor (Server & WebAssembly)

today we start directly in Visual Studio because I want to show you how to upload files in Blazer web applications let's start by building the template for the component we can use the buildin input file component it wraps an HTML input element with the type file and allows for single or multiple file selection we want to react to the user selecting one or more files when we want to have multiple files we need to add the multiple attribute to the input file component later more about that let's stick with a single file for now next I want to add an event handler to the unchange event of the input file component we add a method to the code section of the Blazer component and Define a single parameter of type input field change events arcs the method parameter has only two properties file contains information about the selected file and file count has the number of selected files in case we allow multiple files when we want to get multiple files we need to use the get multiple files method for now we keep it simple and only allow a single file to be uploaded and therefore only consume a single file using the file property of the input file change event arcs type first of all we check if we have a reference to an eye browser file from the file property next we can access a few properties containing information about the selected file I add a few properties to store the information contained in the size content type name and last modified properties next we want to actually read the file content we use the open read three method and put the code in a tri catch to handle IO exceptions by default we can only upload files up to 512 kiloby if you want to change the limit we we need to provide the max file size as an argument to the open read stre method in your application you probably want to store the uploaded file on the cloud or call an API I will however save the file to the local disk first I create a file in the temp directory using the static get temp file name method on the path type next I get the extension from the original file name and create the target file path using the extension I use the static get extension and change extension methods on the path type now I open a new file stream and provide the target file path as an argument next I use the copy to async method to copy the content of the selected file to the local file and close the target stream I also add an error message property that I output on the screen as a trivial error handling in case of an exception I assign the exception message to that error message property now let's finally run the application and upload a file first we select the file using the file picker in the browser as soon as we select the file the unchange Handler will be executed and the file will be stored on the server in my case it's a temp folder on my computer as you can see when I upload a text file or an image it will be stored using the correct file extension and I can also open the files the page also shows the original file name the file size its type and the last modified date as additional information you'll probably use the information internally in your application instead of displaying it on the web app however you might want to confirm the user that the file has been uploaded successfully back in Visual Studio we want to improve our code to handle multiple files instead of one first of all we add the multiple attribute to the input file component as mentioned before it will add the multiple attribute to the rendered HTML input element allowing multiple files to be uploaded next we need to change the Handler method to consider multiple files instead of accessing the file property we use the get multiple files method to get a list of I browser file objects with then use it for each statement and execute the rest of the code of course the file information on the screen will now only show the data from the last processed file let's start the application again and try to upload multiple files in one go we select three different files upload them and within a short period we see them in the temp folder on my local disk when working with user content such as uploading files be aware of security best practices and watch out for any mistakes you should always check the file format do not use the original file name and limit the file upload sizes also make sure to check the content for viruses or other unsafe content I have a link to the file upload best practices Gat sheet of oesp in the video description this example demonstrates how to upload files in bler server where your code is executed on the server if you're running on web samply you cannot directly access the server from your client code in case you want to call an API or store your files in the cloud you can also do that directly from inside the client project you call the API like you would call a service to load data from a regular Blazer backend project however if you want to store the uploaded files on the server you have to pick build a backend service and use an API client to connect to the server and provide the uploaded files the best part about Blazer and file uploads is that no matter if you use Blazer server or Blazer web ass samply you can always use the input file component in both cases and you can also use the same implementation of the unchange Handler to upload the files to your local disk to an API call or anywhere else in the cloud just make sure to understand and where your code will be running let me know in the comments if I should also record a video where I show the same example using Blazer web ass simply instead of bler server file uploading is a common task and bler makes it simple using the builtin input file component to do it for Blazer applications we can handle a single or multiple files at the same time no matter what we can use the same code for running on Blazer web ass samply or Blazer server have you tried file uploading with bler before let me know in the comments about your issues or questions you might have also please consider subscribing to the channel for more regular videos about net development in the future and I'll see you in the next video

Channel: Claudio Bernasconi

Views: 1,913

Keywords: Blazor, ASP.NET Core Blazor, File Upload, File Upload Blazor, Blazor File Upload, Uploading Files, Uploading Files with Blazor, Upload Files with Blazor, InputFile component, InputFile, Blazor Server, Blazor WebAssembly, File Upload Best Practices, .NET, Claudio Bernasconi, dotnet, .NET 7, .NET 8

Id: a4vUjyf-sjQ

Length: 7min 16sec (436 seconds)

Published: Thu Nov 02 2023