Visal Studio 2022 の Blazor プロジェクト作成用テンプレートで Blazor Web App を選び、[Interactive render mode] を [Server] に設定して作成した Blazor アプリから、JavaScript を使ってファイルをアップロードする方法を書きます。
基本的には先の記事「Blazor WASM でファイルアップロード」とほぼ同じです。違いは、WASM ではなく Web App であること、ファイルを選択する画面とアップロードする画面を分けたこと、ファイルをアップロードするスクリプトは jQuery ajax に替えて fetch を使ったこと、複数のファイルを一度にアップロードできるようにしたことです。
ファイルを選択する画面とアップロードする画面を分ける必要はないのですが、訳あって、画面遷移しても <input type="file" /> から取得できる FileList オブジェクトを画面間で受け渡すことができるかを調べるため分けました。
正確に言うと「受け渡す」のではなくて、Blazor アプリは基本 SPA なので、画面が遷移しても書き変わらない共通部分に情報を保持しておいて、異なる画面で共通に使うということです。
作成したアプリを動かして、Select File 画面でファイルを選択し、
その後 Upload File 画面に移って［Upload］ボタンをクリックすると、別プロジェクトとして作成した ASP.NET Core Web API にファイルをアップロードするようになっています。
下に載せたコードで、Select File 画面でファイルを選択して FileList オブジェクト作成し、それを共通部分にある JavaScript の変数に代入し、Upload File 画面に移ってその変数から FileList オブジェクトを取得して FormData オブジェクトを作成し、ファイルをアップロードすることはできました。
ただし、Select File 画面の <input type="file" /> の DOM は、Upload File 画面ではなくなってしまうので、時間が経つとブラウザのガベージコレクタで FileList オブジェクトもなくなってしまう可能性は否定できません。
検証に使ったブラウザは、Windows 10 64-bit の Chrome 130.0.6723.117、Microsoft Edge 130.0.2849.68、Firefox 132.0.1、Opera 114.0.5282.115 です。
以下にどのようにアプリを作成したかを書きます。
まず、一番上の画像に示したように Visual Studio 2022 のテンプレートを使って Blazor Web App のプロジェクトを作成します。この記事のサンプルでは Interactive render mode は Server に、Interactive location は Per Page/component に設定しました。（Interactive render mode は Auto でも WebAssembly でも OK です）
Razor Component の追加
Select File 画面と File Upload 画面の Razor Component を追加します。コードはそれぞれ以下の通りです。Blazor Web App はデフォルトでは static rendering になるので、下のコード例のように rendermode を指定しないと interactive にならず、スクリプトを Invoke できないことに注意してください。
Select File 画面用
@page "/selectfile"
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime;
<h3>Select File</h3>
<input type="file" name="fileupload" id="fileupload"
multiple="multiple" @onchange="Select" />
<div id="result"></div>
@code {
private async Task Select()
{
await JSRuntime.InvokeVoidAsync("select");
}
}
Upload File 画面用
@page "/uploadfile"
@rendermode InteractiveServer
@inject IJSRuntime JSRuntime;
<h3>Upload File</h3>
<button type="button" class="btn btn-primary" @onclick="Upload">
Upload
</button>
<div id="result"></div>
@code {
private async Task Upload()
{
await JSRuntime.InvokeVoidAsync("upload");
}
}
ファイル選択とアップロード用 JavaScript
上の Select File 画面と Upload File 画面でファイル選択とアップロードを行う JavaScript ファイルを作成し、wwwroot フォルダに配置します。名前は任意ですがこの記事では exampleJsInterop.js としています。
window.select = () => {
let fileUpload = document.getElementById("fileupload");
fileList = fileUpload.files;
let str = "<ul>";
for (let i = 0; i < fileList.length; i++) {
str += `<li>${fileList[i].name}, ${fileList[i].type}, ${fileList[i].size}</li>`
}
str += "</ul>";
let result = document.getElementById("result");
result.innerHTML = str;
}
window.upload = async () => {
if (fileList) {
let resultDiv = document.getElementById("result");
let fd = new FormData();
for (let i = 0; i < fileList.length; i++) {
fd.append("postedfiles", fileList[i])
}
const param = {
method: "POST",
body: fd
}
const response = await fetch("送信先 Web API の url", param);
if (response.ok) {
const message = await response.text();
resultDiv.innerText = message;
} else {
resultDiv.innerText = "アップロード失敗";
}
}
}
App.razor にコードを追加
上の Select File 画面の JavaScript で <input type="file" /> から取得した FileList オブジェクトへの参照を保持するスクリプト fileList = null; と、wwwroot に配置した外部スクリプトファイル exampleJsInterop.js をダウンロードできるよう、下の画像の赤枠で囲ったコードを追加します。
Blazor は基本 Single Page Application なので、追加した部分は遷移で書き換えられることはなく、すべての画面で共有されます。
ファイル受信用 Web API
上の JavaScript により送信されたファイルファイルを受信するため、別プロジェクトとして CORS 対応した Web API を作成しています。そのアクションメソッドのコードを下に載せておきます。
using Microsoft.AspNetCore.Mvc;
namespace WebApi.Controllers
{
[Route("[controller]")]
[ApiController]
public class FileUpDownloadController : ControllerBase
{
// 物理パスの取得用
private readonly IWebHostEnvironment _hostingEnvironment;
public FileUpDownloadController(IWebHostEnvironment hostingEnvironment)
{
this._hostingEnvironment = hostingEnvironment;
}
[HttpPost("multiple")]
public async Task<IActionResult> MuilipleFiles(List<IFormFile>? postedFiles)
{
string result = "アップロードされたファイル: ";
if (postedFiles != null)
{
// アプリケーションルートの物理パスを取得
// wwwroot の物理パスは WebRootPath プロパティを使う
string contentRootPath = _hostingEnvironment.ContentRootPath;
foreach (var postedFile in postedFiles)
{
if (postedFile != null && postedFile.Length > 0)
{
// アップロードされたファイル名を取得
string filename = Path.GetFileName(postedFile.FileName);
// アプリケーションルート直下の UploadedFiles フォルダに書き込み
string filePath = $"{contentRootPath}\\UploadedFiles\\{filename}";
using (var stream = new FileStream(filePath, FileMode.Create))
{
await postedFile.CopyToAsync(stream);
}
result += $"{filename} ";
}
}
}
else
{
result = "ファイルアップロードに失敗しました";
}
return Content(result);
}
}
}