下記を参考に手を動かしてみる

バックエンドありで、バックエンドにトークンを保存するケース
https://blog.toru-takagi.dev/article/45/

例えばこんな感じ？

ファイルの選択UIはGoogle Picker API
https://qiita.com/howdy39/items/a7de282e6dd5350f7a7c

Picker APIは選択されたファイルに関するメタデータ（ファイルID、ファイル名、MIMEタイプ）を返すので、バックエンドでこれを使ってGoogle Drive API経由でファイルを指定すればいい？

ここまでを整理してみる with Gemini

フロントエンド・バックエンド構成 + OAuth 2.0 + Google Picker API によるファイル選択機能の流れ

1. 全体の流れ (ステップバイステップ)

1. ユーザー操作 (フロントエンド): ユーザーがアプリケーション内の「ファイルを選択」ボタンなどをクリックします。
2. 認証開始要求 (フロントエンド → バックエンド): フロントエンドがバックエンドに対し、Google認証を開始するようにリクエストを送ります。
3. Google認証へ誘導 (バックエンド → フロントエンド → Google): バックエンドはGoogleの認証URLを生成し、フロントエンドに返します。フロントエンドはユーザーをそのURLにリダイレクトさせます。
4. Googleでの認証・認可 (ユーザー ⇔ Google):
   • ユーザーはGoogleのログイン画面（必要に応じて）で認証します。
   • 次に表示されるOAuth同意画面で、アプリケーションが要求する権限（例: Google Driveへのアクセス）を確認し、「許可」します。
5. リダイレクト (Google → バックエンド): Googleは、ユーザーのブラウザを、予め設定されたバックエンドの「リダイレクトURI」に、認可コードを付けてリダイレクトさせます。
6. トークン交換 (バックエンド ⇔ Google): バックエンドは受け取った認可コードを使って、Googleのサーバーにアクセストークンとリフレッシュトークンをリクエストし、取得します。（※この処理はサーバー間で行われ、ユーザーには見えません。）
7. (トークン取得成功) (※ステップ6に含まれる、ユーザーには見えない処理)
8. 認証完了通知 (バックエンド → フロントエンド): バックエンドはトークンの取得に成功した後、フロントエンドに認証が完了したことを通知します（多くの場合、元のアプリケーション画面へリダイレクトさせます）。場合によっては、後続処理に必要な情報（アクセストークンなど）を安全な方法でフロントエンドに渡します。
9. Picker表示準備・実行 (フロントエンド): フロントエンドは認証完了通知を受け取り、バックエンドから取得したアクセストークンなどの情報を使って、Google Picker APIを初期化し、Picker画面を表示します。
10. ファイル選択 (ユーザー → Picker): ユーザーは表示されたPicker画面上でファイルを選択します。
11. 選択結果取得 (Picker → フロントエンド): ユーザーがファイルを選択し終えると、Picker APIは選択されたファイルの情報（ファイルID、名前など）をフロントエンドのコールバック関数に渡します。
12. 後処理 (フロントエンド、必要なら → バックエンド): フロントエンドは受け取ったファイル情報を画面に表示したり、ファイルIDなどをバックエンドに送信してさらなる処理（ファイルのダウンロード準備など）を依頼したりします。

2. ユーザーから見た画面遷移

ユーザーがファイル選択機能を利用する際の、目に見える画面の移り変わりです。

• 開始: あなたのアプリケーション画面で、「ファイルを選択」ボタンをクリックします。
• 認証:
  • 画面が切り替わり、Googleのログイン画面が表示されます（もしGoogleにログインしていなければ）。ログイン情報を入力します。
  • 次に、OAuth同意画面が表示されます。アプリケーションが要求している権限を確認し、「許可」ボタンをクリックします。
• 復帰:
  • Googleの画面から自動的に元のアプリケーション画面に戻ります。（一瞬だけ、別のアドレスが表示されることもあります）
• ファイル選択:
  • アプリケーション画面の上に、**Google Pickerのファイル選択画面（ポップアップ）**が表示されます。
  • Picker内でGoogle Driveなどのファイルを選択します。
• 完了:
  • ファイルを選択（またはキャンセル）すると、Pickerのポップアップが閉じ、元のアプリケーション画面に戻ります。
  • 選択したファイルの情報がアプリケーション画面に反映されます（例：ファイル名が表示される）。

クライアント画面で

• 承認済みの JavaScript 生成元
  • フロントのドメインURL
• 承認済みのリダイレクト URI
  • バックエンドのコールバック用のURI

動かしてみて

Google Driveから選択する前提でアプリを作らないと、ローカル前提に機能を追加となると挙動を大幅に作り直す必要がありそう。
バックエンドも同時に改修する必要があるので、実装可否の不確実性が高い。