takumifukasawa’s blog

WebGL, Shader, Unity, UE4

【typescript】ファイルの容量を元に適切なファイルサイズの数値と単位を返す関数

ファイルアップローダーを作成する際、ファイルサイズを表示する場合にデザイン的に以下のあたりに気を使うことが多いのかなと思っています。

  • ファイルの容量に応じて適切な単位に切り替える
  • 小数点以下第何位まで表示するか

例えば約3MBのファイルをアップする際、3000KBのようにKB表記にしてしまうとわかりづらく、一方で表記をMB合わせにして約30KBのファイルをアップする場合、0.03MBと表記するとこちらもあまり直感的ではありません。

つまり、ファイルの容量に応じて自動で単位を切り替えるようになっているのが理想です。

macのfinderでは適切なファイルサイズがKBの場合は 166KB と表記し、MBの場合は 1.6MB のような表記になっています。つまり、単位によって表示する小数点以下の位が変わっています。

f:id:takumifukasawa:20201106162205p:plain

f:id:takumifukasawa:20201106162218p:plain

今後使い回すことのできるように、そのあたりを関数にまとめてみました。 作成した関数では小数点以下の位の数は統一するようにしていますが、macのfinderのように単位によって切り替える場合はこの関数の中身を調整してあげればよさそうです。

const units = ["Byte", "KB", "MB", "GB"]; のように単位を列挙し、その数に応じて表記を調整しています。

GBまでの表記が必要なければ配列の中身をByte,KB,MBの3つにすると、どれだけファイル容量が大きくてもMB基準の表記となります。