search

mo-ri-regen / qin-todo-frontend

QinToDoフロントエンド開発
qin-todo-frontend.vercel.app
1 stars 0 forks source link

Feature/yoko #71 #95

Closed yoko-at-home closed 2 years ago

yoko-at-home commented 2 years ago

（３－２）アバター画像の保存と表示 #71 保存のところで迷子になりました。 ここから先参照になる資料などありましたら教えてください。

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/mo-ri-regen/qin-todo-frontend/BimMRg5XwFfAoVbWyWseC9HR2oM2
✅ Preview: Failed

[Deployment for 0dddf83 failed]

takasaki376 commented 2 years ago

とりあえずは、アイコンの「変更する」ボタンをクリックすると、下記のが画面が表示されて、ファイル選択できることが第１段階です。

image

修正されたソースを見ましたが、QinMemoの場合は、バックエンドへユーザ情報を送信して、バックエンド側で保存処理をしていますが、今回バックエンド側の時間がかかっているので、フロントエンドからfirebaseに保存しようかと思っています。なので、QinMemoでMSWの処理はコピーしなくても大丈夫です。

takasaki376 commented 2 years ago

多分、ここのボタンの処理です。

yoko-at-home commented 2 years ago

第一段階はクリアしていると思います（QinMemoのおかげで😅）。 Firebaseのstorageへの保存の方法で参考になる情報とかあればいただきたいです。firebase, next.js, profile image uploadなんかで検索かけてもイマイチこれだというのに出会えません。

yoko-at-home commented 2 years ago

これでやってみようと思います。 Firebaseのdocs見つけました。

takasaki376 commented 2 years ago

Windowsでもファイル選択画面が動作することは確認しました。

これでやってみようと思います。 Firebaseのdocs見つけました。

zennの記事は、Firebaseのバージョン８かもしれません。公式docsのバージョン９の方も参照しながら、試行錯誤をお願いします。

yoko-at-home commented 2 years ago

画像がアップロードできるようになりましたが、まだ処理が完了していません（更新するとGmailのアイコンになってしまいます。

takasaki376 commented 2 years ago

SWRをインストールされていますが、QinMemoのソースにあるからだと思います。 バックエンドとの通信が発生しないなら、不要ではないかと思いますが、画像ファイルの保存完了後にSWRの記述を消してみて、正常に画像が保存されるなら、アンインストールしましょう。

yoko-at-home commented 2 years ago

降参😅

takasaki376 commented 2 years ago

とりあえず、firebaseの認証が通ってないですが、yokoさんの環境でも同じでしょうか？

image

takasaki376 commented 2 years ago

原因はfirebase側の設定です。StorageのRulesのところです。 参考の4.プロジェクトにあわせた権限に変更をするの部分です。

修正前

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if false;
    }
  }
}

修正後

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

image

アップロード結果です。 image