【React】<input type=”file”>で選択したファイルをダウンロードする

タイトル通り、<input type="file"> で選択したファイルを React でダウンロードする方法についてです。
現在開発中の Web システムで、選択したファイルをアップロードする前に確認したいという要望があったため、実装しました。
画像なら、要素のすぐ下あたりでプレビューすることもできたのですが、PDF ファイル等もアップロードできる仕様だったため、ダウンロードするようにしました。

参考にさせていただいた記事はこちらです。

[JavaScript] Blob を使ってクリックするとファイルダウンロードができるボタンを設置する方法｜tsuchippo blog
https://tsuchippo.com/programming-blob

タイトルにある通り、Blob を使います。

サンプルコードは下記のとおりです。

const onFileDownload = () => {
    let bin = atob(["ダウンロードしたいファイルのBase64データ"].replace(/^.*,/, ''));
    let buffer = new Uint8Array(bin.length);
    for (let i = 0; i < bin.length; i++) {
      buffer[i] = bin.charCodeAt(i);
    }
    const blob = new Blob([buffer.buffer], { type: ["ファイルタイプ"] });
    const link = document.createElement('a');
    link.download = ["ファイル名"];
    link.href = URL.createObjectURL(blob);
    link.click();
    URL.revokeObjectURL(link.href);
}

なお、Base64 データは、<input type="file"> の onChange が発火した際に下記を実行すると取得できますので、これを利用します。

const getFileData = (e) => {
    const file = e.target.files[0];
    let fileData = {};

    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(event) {
        fileData = {
            file: file,
            fileName: file.name,
            type: file.type,
            base64: event.target.result,
        }
    };
}

ファイルタイプや、ファイル名等も一緒に取得していますので、併せて適当な変数で保存しておくといいでしょう。
処理としては以上です。

Google Chrome で実行したところ、問題なくファイルのダウンロードができました。
ファイルをサーバーにアップロードする前に、本当に正しいファイルを選択しているのかを確認したいという心配性の方がいらっしゃったので実装した機能ですが、確かにあると安心かもしれません。

以上、React で <input type=”file”> で選択したファイルをダウンロードする方法についてでした。
ご参考になれば幸いです。