Table of content
ASP.NET Core Blazor server file uploads UI
Call a web API from ASP.NET Core Blazor Server
ASP.NET Core Blazor file uploads
https://docs.microsoft.com/en-us/aspnet/core/blazor/file-uploads?view=aspnetcore-5.0
aspnetcore/blazor/file-uploads/samples/5.x/Components/FileUpload.razor
ggg
step 1:ASP.NET Core Blazor server file uploads UI
@page "/Pages/QueuedSms/Create"
@*@attribute [Authorize(Roles = "Administrator")]*@
@using System.ComponentModel.DataAnnotations
@using System.IO
@using System.Linq
@using System.Threading
@implements IDisposable
<h3>File Upload Component</h3>
<EditForm EditContext="editContext" OnValidSubmit="OnSubmit">
<DataAnnotationsValidator />
<div class="form-group">
Name: <InputText @bind-Value="@person.Name" class="form-control" />
<ValidationMessage For="() => person.Name" />
</div>
<div class="form-group">
Picture: <InputFile OnChange="OnChange" class="form-control" />
<ValidationMessage For="() => person.Picture" />
@{
var progressCss = "progress " + (displayProgress ? "" : "d-none");
var progressWidthStyle = progressPercent + "%";
}
<div class="@progressCss">
<div class="progress-bar" role="progressbar" style="width:@progressWidthStyle" area-valuenow="@progressPercent" aria-minvalue="0" aria-maxvalue="100"></div>
</div>
</div>
<button>Submit</button>
</EditForm>
step 2:Call a web API from ASP.NET Core Blazor
useful links:
Call a web API from ASP.NET Core Blazor
https://docs.microsoft.com/en-us/aspnet/core/blazor/call-web-api?view=aspnetcore-5.0