Open2

[小ネタ] dropZoneで firebase storageに向けてアップロードする方法

harrythecodeharrythecode

結論

  • URLを変更 ( MYFIREBASEPROJECT, MYFILENAMEは自環境に合わせる) https://firebasestorage.googleapis.com/v0/b/MYFIREBASEPROJECT.appspot.com/o?uploadType=media&name=MYFILENAME
  • 以下のヘッダをつける ( ブラウザのエラーで怒られるので先にnullにしておく )
        headers: {
          "Cache-Control": null,
          "X-Requested-With": null,
        },

https://loama.medium.com/upload-directly-to-firebase-hosting-using-dropzone-js-676ec0b40180
https://stackoverflow.com/questions/44534522/request-header-field-cache-control-is-not-allowed

ちなみに

Firebase上ではSecurity Rulesを適用しないとまずいので必ずHeadersにはFirebaseセッションも合わせて送ること。

        headers: {
          "Cache-Control": null,
          "X-Requested-With": null,
+         "Authorization": "Bearer " + xxx
        },
  • Security Rules
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // ユーザーIDを含むパスのマッチング
    match /users/{user_id}/{allPaths=**} {
      // 読み書きの許可条件
      allow read, write: if request.auth != null && request.auth.uid == user_id;
    }
  }
}

https://zenn.dev/amezousan/scraps/4c388caa7ba6d5