Blazor WebAssemblyでファイル名を自然順でソート

はじめに

複数のファイルを連番で管理するときにはプログラムでソートしやすいようにゼロ埋めしたファイル名を利用していました。Blazor WebAssemblyのアプリで複数のファイルをアップロードして処理した際、ファイル名の順番がWindowsと異なっていると言われて確認したところ、Windowsのエクスプローラーではファイル名の並べ替えが自然順になっていました。

現状の動作の確認

Blazor WebAssemblyのアプリで複数ファイルを指定するとき、以下のようなコードを書いていました。

private void LoadImageFiles(InputFileChangeEventArgs e)
{
    foreach (var file in e.GetMultipleFiles(maxAllowedFiles))
    {
    }
}

e.GetMultipleFiles()で取得できるファイルの順番はフォルダーで指定されている並べ替えの順が適用されていました。ユーザーがいつも名前で並べ替えをしていればそれでよいのですが、その想定は無理があるので自然順でのソートを適用することにしました。

ライブラリのインストール

NuGetをさがしてみたところ自然順のソートはいくつかのライブラリが見つかりましたが、ダウンロード数が多くてメンテナンスもされていそうな以下のライブラリをインストールしました。

_Imports.razorにNaturalSort.Extensionを追加します。

_Imports.razor

@using NaturalSort.Extension

ライブラリの利用

従来のコードでは普通にソートをしていました。

foreach (var content in contents.OrderBy(x => x.Key)) {}

OrderByの2番目の引数を指定して自然順でのソートができるようになりました。

foreach (var content in contents.OrderBy(x => x.Key, StringComparison.OrdinalIgnoreCase.WithNaturalSort())) {}

おわりに

最初は自然順のソートを自分で実装する必要があるかと思っていたのですが、NuGetでよいライブラリが見つかってよかったです。日本語のファイル名を正常に処理できるかなど、まだ検証できていない部分もあるので、引き続き動作確認をしていきたいと思います。