blazor upload file in csharp

To upload a file in Blazor using C#, we need to create a form and use the httpClient to post the file to the web api endpoint. Here's an example:

In your Blazor component, create a form with an input of type file:


<form>
    <input type="file" @onchange="HandleFileUpload" />
    <button type="submit" @onclick="UploadFile">Upload</button>
</form>
134 chars
5 lines

In your component's code, create a property to hold the uploaded file:


main.cs
private IFormFile file;

private void HandleFileUpload(InputFileChangeEventArgs e)
{
    file = e.File;
}
106 chars
7 lines

Create a method to handle the form submission and send the file to the web api endpoint:


main.cs
private async Task UploadFile()
{
    var formData = new MultipartFormDataContent();
    formData.Add(new StreamContent(file.OpenReadStream()), "file", file.FileName);

    using (var httpClient = new HttpClient())
    {
        var response = await httpClient.PostAsync("api/files", formData);

        if (!response.IsSuccessStatusCode)
        {
            // handle error
        }
    }
}
395 chars
16 lines

In your web api controller, create an endpoint to handle the file upload:


main.cs
[HttpPost]
public async Task<IActionResult> UploadFile(IFormFile file)
{
    // do something with the file

    return Ok();
}
127 chars
8 lines

And that's it! You should now be able to upload files from your Blazor app to your web api.

similar csharp code snippets

blazor toast in csharp

how to authenticate user blazor in csharp

asp.net upload file in csharp

create a http server and upload a file and return a binary response in csharp

create a http server and upload a file in csharp

find the index of an element in an array in csharp

remove an element from the beginning of an array in csharp

insert an element into an array at a specific index in csharp

remove an element from the middle of an array in csharp

remove an element from an array at a specific index in csharp

related categories