Open2024/02/28にコメント追加2

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

結論

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,
        },

ちなみに

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;
    }
  }
}

harrythecode

おまけ

Vue DropZoneで呼び出せるイベント一覧