از زمان Blazor 5x، امکان آپلود فایل به صورت استاندارد به Blazor اضافه شده‌است که نمونه‌ی Blazor Server آنرا پیشتر در مطلب «
Blazor 5x - قسمت 17 - کار با فرم‌ها - بخش 5 - آپلود تصاویر» مطالعه کردید. در تکمیل آن، روش آپلود فایلها در برنامه‌های WASM را نیز بررسی خواهیم کرد. این برنامه از نوع hosted است؛ یعنی توسط دستور dotnet new blazorwasm --hosted ایجاد شده‌است و به صورت خودکار دارای سه بخش Client، Server و Shared است.
معرفی مدل ارسالی برنامه سمت کلاینت
فرض کنید مطابق شکل فوق، قرار است اطلاعات یک کاربر، به همراه تعدادی تصویر از او، به سمت Web API ارسال شوند. برای نمونه، مدل اشتراکی کاربر را به صورت زیر تعریف کرده‌ایم:
using System.ComponentModel.DataAnnotations;
namespace BlazorWasmUpload.Shared
{
public class User
{
[Required]
public string Name { get; set; }
[Required]
[Range(18, 90)]
public int Age { get; set; }
}
} ساختار کنترلر Web API دریافت کننده‌ی مدل برنامه
در این حالت امضای اکشن متد CreateUser واقع در کنترلر Files که قرار است این اطلاعات را دریافت کند، به صورت زیر است:
namespace BlazorWasmUpload.Server.Controllers
{
[ApiController]
[Route("api/[controller]/[action]")]
public class FilesController : ControllerBase
{
[HttpPost]
public async Task<IActionResult> CreateUser(
[FromForm] User userModel,
[FromForm] IList<IFormFile> inputFiles = null)
یعنی در سمت Web API، قرار است اطلاعات مدل User و همچنین لیستی از فایل‌های آپلودی (احتمالی و اختیاری) را یکجا و در طی یک عملیات Post، دریافت کنیم. در اینجا نام پارامترهایی را هم که انتظار داریم، دقیقا userModel و inputFiles هستند. همچنین فایل‌های آپلودی باید بتوانند ساختار IFormFile استاندارد ASP.NET Core را تشکیل داده و به صورت خودکار به پارامترهای تعریف شده، bind شوند. به علاوه content-type مورد انتظار هم FromForm است.
ایجاد سرویسی در سمت کلاینت، برای آپلود اطلاعات یک مدل به همراه فایل‌های انتخابی کاربر
کدهای کامل سرویسی که می‌تواند انتظارات یاد شده را در سمت کلاینت برآورده کند، به صورت زیر است:
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Forms;
namespace BlazorWasmUpload.Client.Services
{
public interface IFilesManagerService
{
Task<HttpResponseMessage> PostModelWithFilesAsync<T>(string requestUri,
IEnumerable<IBrowserFile> browserFiles,
string fileParameterName,
T model,
string modelParameterName);
}
public class FilesManagerService : IFilesManagerService
{
private readonly HttpClient _httpClient;
public FilesManagerService(HttpClient httpClient)
{
_httpClient = httpClient;
}
public async Task<HttpResponseMessage> PostModelWithFilesAsync<T>(
string requestUri,
IEnumerable<IBrowserFile> browserFiles,
string fileParameterName,
T model,
string modelParameterName)
{
var requestContent = new MultipartFormDataContent();
requestContent.Headers.ContentDisposition = new ContentDispositionHeaderValue("form-data");
if (browserFiles?.Any() == true)
{
foreach (var file in browserFiles)
{
var stream = file.OpenReadStream(maxAllowedSize: 512000 * 1000);
requestContent.Add(content: new StreamContent(stream, (int)file.Size), name: fileParameterName, fileName: file.Name);
}
}
requestContent.Add(
content: new StringContent(JsonSerializer.Serialize(model), Encoding.UTF8, "application/json"),
name: modelParameterName);
var result = await _httpClient.PostAsync(requestUri, requestContent);
result.EnsureSuccessStatusCode();
return result;
}
}
} توضیحات:
- کامپوننت استاندارد InputFiles در Blazor Wasm، می‌تواند لیستی از IBrowserFileهای انتخابی توسط کاربر را در اختیار ما قرار دهد.
- fileParameterName، همان نام پارامتر "inputFiles" در اکشن متد سمت سرور مثال جاری است که به صورت متغیر قابل تنظیم شده‌است.
- model جنریک، برای نمونه وهله‌ای از شیء User است که به یک فرم Blazor متصل است.
- modelParameterName، همان نام پارامتر "userModel" در اکشن متد سمت سرور مثال جاری است که به صورت متغیر قابل تنظیم شده‌است.
- در ادامه یک MultipartFormDataContent را تشکیل داده‌ایم. توسط این ساختار میتوان فایلها و اطلاعات یک مدل را به صورت یکجا جمع آوری و به سمت سرور ارسال کرد. به این content ویژه، ابتدای لیستی از new StreamContentها را اضافه میکنیم. این streamها توسط متد OpenReadStream هر IBrowserFile دریافتی از کامپوننت InputFile، تشکیل می‌شوند. متد OpenReadStream به صورت پیش‌فرض فقط فایل‌هایی تا حجم 500 کیلوبایت را پردازش می‌کند و اگر فایلی حجیم‌تر را به آن معرفی کنیم، یک استثناء را صادر خواهد کرد. به همین جهت میتوان توسط پارامتر maxAllowedSize آن، این مقدار پیش‌فرض را تغییر داد.
- در اینجا مدل برنامه به صورت JSON به عنوان یک new StringContent اضافه شده‌است. مزیت کار کردن با JsonSerializer.Serialize استاندارد، ساده شدن برنامه و عدم درگیری با مباحث Reflection و خواندن پویای اطلاعات مدل جنریک است. اما در ادامه مشکلی را پدید خواهد آورد! این رشته‌ی ارسالی به سمت سرور، به صورت خودکار به یک مدل، Bind نخواهد شد و باید برای آن یک model-binder سفارشی را بنویسیم. یعنی این رشته‌ی new StringContent را در سمت سرور دقیقا به صورت یک رشته معمولی میتوان دریافت کرد و نه حالت دیگری و مهم نیست که اکنون به صورت JSON ارسال می‌شود؛ چون MultipartFormDataContent ویژه‌ای را داریم، model-binder پیش‌فرض ASP.NET Core، انتظار یک شیء خاص را در این بین ندارد.
- تنظیم "form-data" را هم به عنوان Headers.ContentDisposition مشاهده میکنید. بدون وجود آن، ویژگی [FromForm] سمت Web API، از پردازش درخواست جلوگیری خواهد کرد.
- در آخر توسط متد PostAsync، این اطلاعات جمع آوری شده، به سمت سرور ارسال خواهند شد.
پس از تهیه‌ی سرویس ویژه‌ی فوق که می‌تواند اطلاعات فایلها و یک مدل را به صورت یکجا به سمت سرور ارسال کند، اکنون نوبت به ثبت و معرفی آن به سیستم تزریق وابستگی‌ها در فایل Program.cs برنامه‌ی کلاینت است:
namespace BlazorWasmUpload.Client
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
// ...
builder.Services.AddScoped<IFilesManagerService, FilesManagerService>();
// ...
}
}
} تکمیل فرم ارسال اطلاعات مدل و فایل‌های همراه آن در برنامه‌ی Blazor WASM
در ادامه پس از تشکیل IFilesManagerService، نوبت به استفاده‌ی از آن است. به همین جهت همان کامپوننت Index برنامه را به صورت زیر تغییر می‌دهیم:
@code
{
IReadOnlyList<IBrowserFile> SelectedFiles;
User UserModel = new User();
bool isProcessing;
string UploadErrorMessage;
در اینجا فیلدهای مورد استفاده‌ی در فرم برنامه مشخص شده‌اند:
- SelectedFiles همان لیست فایل‌های انتخابی توسط کاربر است.
- UserModel شیءای است که به EditForm جاری متصل خواهد شد.
- توسط isProcessing ابتدا و انتهای آپلود به سرور را مشخص میکنیم.
- UploadErrorMessage، خطای احتمالی انتخاب فایلها مانند «فقط تصاویر را انتخاب کنید» را تعریف می‌کند.
بر این اساس، فرمی را که در تصویر ابتدای بحث مشاهده کردید، به صورت زیر تشکیل می‌دهیم:
@page "/"
@using System.IO
@using BlazorWasmUpload.Shared
@using BlazorWasmUpload.Client.Services
@inject IFilesManagerService FilesManagerService
<h3>Post a model with files</h3>
<EditForm Model="UserModel" OnValidSubmit="CreateUserAsync">
<DataAnnotationsValidator />
<div>
<label>Name</label>
<InputText @bind-Value="UserModel.Name"></InputText>
<ValidationMessage For="()=>UserModel.Name"></ValidationMessage>
</div>
<div>
<label>Age</label>
<InputNumber @bind-Value="UserModel.Age"></InputNumber>
<ValidationMessage For="()=>UserModel.Age"></ValidationMessage>
</div>
<div>
<label>Photos</label>
<InputFile multiple disabled="@isProcessing" OnChange="OnInputFileChange" />
@if (!string.IsNullOrWhiteSpace(UploadErrorMessage))
{
<div>
@UploadErrorMessage
</div>
}
@if (SelectedFiles?.Count > 0)
{
<table>
<thead>
<tr>
<th>Name</th>
<th>Size (bytes)</th>
<th>Last Modified</th>
<th>Type</th>
</tr>
</thead>
<tbody>
@foreach (var selectedFile in SelectedFiles)
{
<tr>
<td>@selectedFile.Name</td>
<td>@selectedFile.Size</td>
<td>@selectedFile.LastModified</td>
<td>@selectedFile.ContentType</td>
</tr>
}
</tbody>
</table>
}
</div>
<div>
<button disabled="@isProcessing">Create user</button>
</div>
</EditForm> توضیحات:
- UserModel که وهله‌ی از شیء اشتراکی User است، به EditForm متصل شده‌است.
- سپس توسط یک InputText و InputNumber، مقادیر خواص نام و سن کاربر را دریافت میکنیم.
- InputFile دارای ویژگی multiple هم امکان دریافت چندین فایل را توسط کاربر میسر می‌کند. پس از انتخاب فایلها، رویداد OnChange آن، توسط متد OnInputFileChange مدیریت خواهد شد:
private void OnInputFileChange(InputFileChangeEventArgs args)
{
var files = args.GetMultipleFiles(maximumFileCount: 15);
if (args.FileCount == 0 || files.Count == 0)
{
UploadErrorMessage = "Please select a file.";
return;
}
var allowedExtensions = new List<string> { ".jpg", ".png", ".jpeg" };
if(!files.Any(file => allowedExtensions.Contains(Path.GetExtension(file.Name), StringComparer.OrdinalIgnoreCase)))
{
UploadErrorMessage = "Please select .jpg/.jpeg/.png files only.";
return;
}
SelectedFiles = files;
UploadErrorMessage = string.Empty;
}
- در اینجا امضای متد رویداد گردان OnChange را مشاهده میکنید. توسط متد GetMultipleFiles میتوان لیست فایل‌های انتخابی توسط کاربر را دریافت کرد. نیاز است پارامتر maximumFileCount آنرا نیز تنظیم کنیم تا دقیقا مشخص شود چه تعداد فایلی مدنظر است؛ بیش از آن، یک استثناء را صادر می‌کند.
- در ادامه اگر فایلی انتخاب نشده باشد، یا فایل انتخابی، تصویری نباشد، با مقدار دهی UploadErrorMessage، خطایی را به کاربر نمایش می‌دهیم.
- در پایان این متد، لیست فایل‌های دریافتی را به فیلد SelectedFiles انتساب می‌دهیم تا در ذیل InputFile، به صورت یک جدول نمایش داده شوند.
مرحله‌ی آخر تکمیل این فرم، تدارک متد رویدادگردان OnValidSubmit فرم برنامه است:
private async Task CreateUserAsync()
{
try
{
isProcessing = true;
await FilesManagerService.PostModelWithFilesAsync(
requestUri: "api/Files/CreateUser",
browserFiles: SelectedFiles,
fileParameterName: "inputFiles",
model: UserModel,
modelParameterName: "userModel");
UserModel = new User();
}
finally
{
isProcessing = false;
SelectedFiles = null;
}
}
- در اینجا زمانیکه isProcessing به true تنظیم می‌شود، دکمه‌ی ارسال اطلاعات، غیرفعال خواهد شد؛ تا از کلیک چندباره‌ی بر روی آن جلوگیری شود.
- سپس روش استفاده‌ی از متد PostModelWithFilesAsync سرویس FilesManagerService را مشاهده میکنید که اطلاعات فایلها و مدل برنامه را به سمت اکشن متد api/Files/CreateUser ارسال می‌کند.
- در آخر با وهله سازی مجدد UserModel، به صورت خودکار فرم برنامه را پاک کرده و آماده‌ی دریافت اطلاعات بعدی میکنیم.
تکمیل کنترلر Web API دریافت کننده‌ی مدل برنامه
در ابتدای بحث، ساختار ابتدایی کنترلر Web API دریافت کننده‌ی اطلاعات FilesManagerService.PostModelWithFilesAsync فوق را معرفی کردیم. در ادامه کدهای کامل آنرا مشاهده میکنید:
using System.IO;
using Microsoft.AspNetCore.Mvc;
using BlazorWasmUpload.Shared;
using Microsoft.AspNetCore.Hosting;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http;
using System.Collections.Generic;
using Microsoft.Extensions.Logging;
using System.Text.Json;
using BlazorWasmUpload.Server.Utils;
using System.Linq;
namespace BlazorWasmUpload.Server.Controllers
{
[ApiController]
[Route("api/[controller]/[action]")]
public class FilesController : ControllerBase
{
private const int MaxBufferSize = 0x10000;
private readonly IWebHostEnvironment _webHostEnvironment;
private readonly ILogger<FilesController> _logger;
public FilesController(
IWebHostEnvironment webHostEnvironment,
ILogger<FilesController> logger)
{
_webHostEnvironment = webHostEnvironment;
_logger = logger;
}
[HttpPost]
public async Task<IActionResult> CreateUser(
//[FromForm] string userModel, // <-- this is the actual form of the posted model
[ModelBinder(BinderType = typeof(JsonModelBinder)), FromForm] User userModel,
[FromForm] IList<IFormFile> inputFiles = null)
{
/*var user = JsonSerializer.Deserialize<User>(userModel);
_logger.LogInformation($"userModel.Name: {user.Name}");
_logger.LogInformation($"userModel.Age: {user.Age}");*/
_logger.LogInformation($"userModel.Name: {userModel.Name}");
_logger.LogInformation($"userModel.Age: {userModel.Age}");
var uploadsRootFolder = Path.Combine(_webHostEnvironment.WebRootPath, "Files");
if (!Directory.Exists(uploadsRootFolder))
{
Directory.CreateDirectory(uploadsRootFolder);
}
if (inputFiles?.Any() == true)
{
foreach (var file in inputFiles)
{
if (file == null || file.Length == 0)
{
continue;
}
var filePath = Path.Combine(uploadsRootFolder, file.FileName);
using var fileStream = new FileStream(filePath,
FileMode.Create,
FileAccess.Write,
FileShare.None,
MaxBufferSize,
useAsync: true);
await file.CopyToAsync(fileStream);
_logger.LogInformation($"Saved file: {filePath}");
}
}
return Ok();
}
}
}
نکات تکمیلی این کنترلر را در مطلب «
بررسی روش آپلود فایلها در ASP.NET Core» میتوانید مطالعه کنید و از این لحاظ هیچ نکته‌ی جدیدی را به همراه ندارد؛ بجز پارامتر userModel آن:
[ModelBinder(BinderType = typeof(JsonModelBinder)), FromForm] User userModel,
همانطور که عنوان شد، userModel ارسالی به سمت سرور چون به همراه تعدادی فایل است، به صورت خودکار به شیء User نگاشت نخواهد شد. به همین جهت نیاز است model-binder سفارشی زیر را برای آن تهیه کرد:
using System;
using System.Text.Json;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.ModelBinding;
namespace BlazorWasmUpload.Server.Utils
{
public class JsonModelBinder : IModelBinder
{
public Task BindModelAsync(ModelBindingContext bindingContext)
{
if (bindingContext == null)
{
throw new ArgumentNullException(nameof(bindingContext));
}
var valueProviderResult = bindingContext.ValueProvider.GetValue(bindingContext.ModelName);
if (valueProviderResult != ValueProviderResult.None)
{
bindingContext.ModelState.SetModelValue(bindingContext.ModelName, valueProviderResult);
var valueAsString = valueProviderResult.FirstValue;
var result = JsonSerializer.Deserialize(valueAsString, bindingContext.ModelType);
if (result != null)
{
bindingContext.Result = ModelBindingResult.Success(result);
return Task.CompletedTask;
}
}
return Task.CompletedTask;
}
}
}
در اینجا مقدار رشته‌ای پارامتر مزین شده‌ی توسط JsonModelBinder فوق، توسط متد استاندارد JsonSerializer.Deserialize تبدیل به یک شیء شده و به آن پارامتر انتساب داده می‌شود. اگر نخواهیم از این model-binder سفارشی استفاده کنیم، ابتدا باید پارامتر دریافتی را رشته‌ای تعریف کنیم و سپس خودمان کار فراخوانی متد JsonSerializer.Deserialize را انجام دهیم:
[HttpPost]
public async Task<IActionResult> CreateUser(
[FromForm] string userModel, // <-- this is the actual form of the posted model
[FromForm] IList<IFormFile> inputFiles = null)
{
var user = JsonSerializer.Deserialize<User>(userModel);
یک نکته تکمیلی: در Blazor 5x، از نمایش درصد پیشرفت آپلود، پشتیبانی نمی‌شود؛ از این جهت که HttpClient طراحی شده، در اصل به
fetch API استاندارد مرورگر ترجمه می‌شود و این API استاندارد، هنوز از streaming
پشتیبانی نمی‌کند . حتی ممکن است با کمی جستجو به راه‌حل‌هایی که سعی کرده‌اند بر اساس HttpClient و نوشتن بایت به بایت اطلاعات در آن، درصد پیشرفت آپلود را محاسبه کرده باشند، برسید. این راه‌حل‌ها تنها کاری را که انجام می‌دهند، بافر کردن اطلاعات، جهت fetch API و سپس ارسال تمام آن است. به همین جهت درصدی که نمایش داده می‌شود، درصد بافر شدن اطلاعات در خود مرورگر است (پیش از ارسال آن به سرور) و سپس تحویل آن به fetch API جهت ارسال نهایی به سمت سرور.
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: BlazorWasmUpload.zip 
