PDFファイルをブラウザで読み込みbase64にしたい

前提

HTML、JavaScriptでpdfアップロードができ、そのファイルを別画面で表示できるような画面、システムを作っています。今回はpdfアップロードの画面、システムについてお聞きしたいです。

大まかな画面の枠はHTMLで作ったのですが、ファイルのアップロード機能を実装することができず、方法が全く分かりません。ブラウザで読み込んだファイルを、base64に変換し、保持するということがしたいのですが、可能なのでしょうか？

実現したいこと

HTMLのInput fileからファイルをあげて、
・ファイルを読み込み
・ファイルをbase64に変換
のJavaScriptが知りたいです。

該当のソースコード

@{
<div class=" modal fade modal-dialog modal-dialog-centered" id="Modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">

                <div class="input-group mb">
                    <input type="file" class="form-control" id="inputGroupFile02">
                </div>
        </div>
    </div>
</div>
<script>
    $(function () {
            // ファイルを読み込む

            // 読み込んだファイルをBase64に変換する
            function getBase64(file) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    console.log(reader.result);
                };
                reader.onerror = function (error) {
                    console.log('Error: ', error);
                };
            }
            var file = document.querySelector('#files > input[type="file"]').files[0];
            getBase64(file); // prints the base64 string
            //
            $.put({
                url: "/UploadFile",
                data: {
                    FileContent: "", // Base64
                },

                success: function (data, textStatus, jqXHR) {
                    if (data.success) {
                        window.alert("成功しました");
                        return;
                    } else {
                        window.alert("失敗しました");
                    }
                }
            });
        });

    });
</script>

}


### 試したこと



### 補足情報（FW/ツールのバージョンなど）
Visalstudio2022を使い作業しています

行動規範の内容に同意します

回答1件

getBase64でreader.resultでbase64データを返し、putに渡せばOKだと思います。
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);return reader.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}