Revision history [back]

Here's how to upload a file in Blazor WebAssembly hosted by aspnetcore:

1. Create a file upload component (e.g., FileUpload.razor) that contains an input element with type="file" and a button that triggers an event to upload the selected file.

2. In the component's code block, add a parameter that represents the file to be uploaded (e.g., [Parameter] public IFormFile FileToUpload { get; set; }).

3. In the button's click event handler, call a method that sends the file to the server using HttpClient (e.g., await HttpClient.PostAsync("/api/upload", new MultipartFormDataContent() { { new StreamContent(FileToUpload.OpenReadStream()), "file", FileToUpload.FileName } });).

4. On the server, create an API endpoint that receives the uploaded file (e.g., [HttpPost("upload")] public async Task<iactionresult> Upload(IFormFile file)).

5. In the API endpoint, save the file to disk or process it as required.

6. Return a response (e.g., Ok()) to indicate the success or failure of the upload.

7. Use the file upload component in your Blazor pages by adding it to the markup (e.g., <fileupload @bind-filetoupload="SelectedFile"/>) and binding the FileToUpload parameter to a property in your page's code block (e.g., private IFormFile SelectedFile { get; set; }).