アプリにファイルアップロードを追加する方法：ストレージ、制限、セキュリティ

アプリにファイルアップロードを追加するには、ファイルをオブジェクトストレージ（バケット）に保存し、サーバーのディスクやデータベースには保存しないでください。データベースには、ファイルのキー、名前、サイズ、種類、所有者を含む小さなレコードを保存します。サーバーでファイルのサイズと種類を確認し、ファイルが公開されるもの（商品写真など）なのか、非公開のもの（請求書など）なのかを最初に決めておきます。非公開のファイルは、誰がリクエストしているかを確認したあとにだけ配信してください。AIアプリビルダーでは、1つのプロンプトでアップロード機能を説明できます。重要なのは、再デプロイのあともファイルが残ること、そして別の人が開けないことをテストすることです。

必要なアップロードの種類を決める

作る前に、次の3つの質問に答えてください。

1. どんなファイルか？ プロフィール写真、商品画像、PDF、スプレッドシート、音声、動画。これで種類とサイズの制限が決まります。
2. 誰が見られるか？ 全員（公開のギャラリー）か、アップロードした本人と管理者だけ（契約書、本人確認書類、顧客のファイル）か。
3. アップロードのあとに何が起きるか？ 単に保存するだけか、プレビューを表示するか、画像をリサイズするか、中身を読み取るか。

公開画像と非公開の文書では設定が異なるので、まずこれを決めてください。

ファイルの保存場所

ほとんどのアプリでは、オブジェクトストレージとデータベースのレコードの組み合わせが正解です。アプリが問い合わせるのはデータベースの行（「このユーザーの文書を表示」）であり、バケットはバイト列を保持しているだけです。

公開ファイルと非公開ファイル

• 公開ファイル（商品写真、ブログの画像、アバター）は、公開URLから配信できます。リンクを知っている人なら誰でも開けるので、この種のコンテンツには問題ありません。
• 非公開ファイル（請求書、契約書、医療や本人確認の書類、顧客への納品物）は、推測できる公開URLを絶対に持たせてはいけません。サーバーがログイン中のユーザーにそのファイルの所有権または権限があるかを確認し、そのうえでファイルを送信するか、短時間だけ有効な署名付きURLを返します。

よくあり、かつ深刻なバグは、非公開のファイルを、予測しやすい名前で公開バケットに保存してしまうことです。/uploads/invoice-102.pdfを推測できる人は、他人の請求書を入手できてしまいます。

プロンプトの例

公開画像のアップロードの場合：

管理者が、商品ごとに商品写真を最大5枚までアップロードできるようにして。JPG、PNG、WebPを、1枚あたり5 MBまで受け付けて。ファイルはファイルストレージに保存し、各ファイルのキー、サイズ、順番をproduct_imagesテーブルに保存して。サムネイルと削除ボタンを表示して。種類とサイズはブラウザだけでなく、サーバーで検証して。

非公開の文書のアップロードの場合：

ログイン中の顧客向けに文書ページを追加して。顧客は、20 MBまでのPDFをアップロードできるようにして。ファイルは非公開にして。ファイルストレージに保存し、所有者ID、元のファイル名、サイズ、アップロード日時をdocumentsテーブルに保存して。ダウンロードできるのは所有者と管理者だけにして。ダウンロードは、権限を確認するサーバールートを通すようにして。これらのファイルに公開URLを絶対に出さないで。

あると便利なフォローアップ：

アップロード中は進捗バーを表示し、ファイルが大きすぎるか種類が違う場合は、分かりやすいエラーを表示して。

文書の行が削除されたら、保存されているファイルも削除して。

手順

1. 各アップロード項目について、種類とサイズの制限を決める。「文書」ではなく「20 MBまでのPDF」のように具体的にしてください。
2. ストレージを有効にする。 AIビルダーでは、アップロードを依頼すればストレージが設定されます。それ以外では、バケットを作成し、その認証情報をサーバー側のシークレットとして追加してください。
3. ファイルのレコード用のデータベーステーブルを作る。 ID、所有者、ストレージのキー、元の名前、種類、サイズ、作成日時を含めます。
4. サーバーでアップロードのルートを作る。 ユーザーがログインしているか、種類とサイズを確認し、安全なストレージキーを生成し（利用者のファイル名は使わない）、ファイルを保存し、レコードを挿入します。
5. ダウンロードまたは表示の経路を作る。 公開ファイルは公開URL、非公開ファイルは権限を確認するルートまたは署名付きURLを使います。
6. UIを作る。 ファイル選択、必要ならドラッグ＆ドロップ、進捗、プレビュー、エラー表示。
7. 削除を扱う。 レコードを削除したら、保存されたファイルも削除されるようにします。
8. テストする。 アップロードし、再読み込みし、再デプロイまたは公開して、ファイルがまだ読み込めるか確認します。そのあと別のユーザーでログインし、最初のユーザーの非公開ファイルを開こうとしてみてください。

よくあるミス

• アップロードをサーバーのディスクに書き込む。 開発環境では動きますが、再起動や再デプロイのあとにファイルが消えます。
• ブラウザのチェックを信用する。 ファイル入力の「accept」設定はヒントであって、セキュリティではありません。種類とサイズはサーバーで確認してください。
• 利用者のファイル名をそのままストレージキーにする。 名前が衝突したり、変わった文字を含んだりします。一意のキーを生成し、元の名前は別に保存してください。
• 非公開ファイルを公開バケットに置く。 上で述べたとおり、これがニュースになる類のミスです。
• どんな種類のファイルも許可する。 一部の構成では、ドメインから配信されるHTMLやSVGのファイルがスクリプトを実行することがあります。必要な種類だけを受け付けてください。
• サイズの制限がない。 1つの巨大なアップロードで、ストレージの割り当てを使い切ったり、リクエストがタイムアウトしたりします。
• 孤立したファイル。 データベースの行は削除したのにファイルを残すと、支払っているストレージが少しずつ埋まっていきます。
• スマートフォンを忘れる。 スマートフォンの写真は大きく、HEICのような形式であることがあります。受け付けるか変換するかを決めてください。

チェックリスト

• ファイルはサーバーのディスクやデータベースではなく、オブジェクトストレージに保存される
• 各ファイルに、所有者、キー、名前、種類、サイズを持つデータベースのレコードがある
• 種類とサイズはサーバーで確認される
• ストレージキーは、ファイル名から取らず、生成される
• 非公開ファイルは、権限を確認したあとにだけ配信される
• 別のユーザーは、リンクを知っていても、自分の非公開ファイルを開けない
• レコードを削除すると、ファイルも削除される
• 公開や再デプロイのあとも、ファイルが読み込める
• アップロードのエラーが、スマートフォンを含めて分かりやすく表示される

Mythexでのファイルアップロード

Mythexは、アプリにアップロードが必要なときに、プロジェクトのファイルストレージを自動で有効にできます。バケットを手動で用意する必要はありません。チャットで/storageと入力することもできます。FreeとProで利用でき、Freeは1 GBの上限があります。ステータスは設定 → ストレージで確認できます。

ドキュメントでは、公開されたホスティングは永続的なローカルファイルシステムではないと明記されています。そのため、ディスクに保存せず、プラットフォームのストレージを使うようエージェントに依頼してください。保存されたファイルとダウンロードは、サイズと、どれだけダウンロードされたかに応じて、クレジット残高から支払われます。Proの料金はFreeの半額です。詳しくは、ドキュメントのファイルストレージを参照してください。

アップロードは、ファイルのレコードのためのデータベースや、非公開ファイルのためのログインと一緒に使われることがほとんどです。顧客が文書をやり取りする場を作る場合は、クライアントポータルの作り方を参照し、公開の前にセキュリティチェックリストを確認してください。

よくある質問