BlazorInputFile 利用アプリケーションをビルドすると RZ9985: Multiple components use the tag 'InputFile' エラーが発生する

BlazorInputFile 利用アプリケーションをビルドすると RZ9985: Multiple components use the tag 'InputFile' エラーが発生する現象と対処法を紹介します。

現象

BlazorInputFile 利用アプリケーションをビルドすると以下のエラーが発生します。

原因

Razorファイルに記述したInputFile タグの名称が Microsoft.AspNetCore.Components.Forms.InputFile か BlazorInputFile.InputFile であるかの判別ができないため、エラーが発生します。

@page "/Index"
@inject IFileUploadService fileUploadService
<h3>FileUpload</h3>
<p></p>

<InputFile OnChange="HandleFileSelected" />

@code {
  async Task HandleFileSelected(IFileListEntry[] files)
  {
    IFileListEntry file = files.FirstOrDefault();
    if (file != null) {
      await fileUploadService.UploadAsync(file);
    }
  }
}

対処法

Razorファイルを下記に変更し、BlazorInputFile 名前空間のInputFile タグであることを明示します。

@page "/Index"
@inject IFileUploadService fileUploadService
<h3>FileUpload</h3>
<p></p>

<BlazorInputFile.InputFile OnChange="HandleFileSelected" />

@code {
  async Task HandleFileSelected(IFileListEntry[] files)
  {
    IFileListEntry file = files.FirstOrDefault();
    if (file != null) {
      await fileUploadService.UploadAsync(file);
    }
  }
}