Firebase Upload to Storage Bucket Failing due to Permission Error, despite Allowing Read + Write

Question

I'm trying to upload files to my storage bucket ref, but I'm getting the error:

r
code
:
"storage/unauthorized"
message
:
"Firebase Storage: User does not have permission to access 'pdf'."
name
:
"FirebaseError"
serverResponse
:
"{↵  "error": {↵    "code": 403,↵    "message": "Permission denied. Could not perform this operation"↵  }↵}"
__proto__
:
Error

Here's the code I'm using to submit the upload:

 submitUpload: function(){
     var files = this.$refs.upload.uploadFiles;
     console.log(files);
     var storageRef = storage.ref();
     var file = files[0]['raw'];
     console.log(file + ' is the file');
     var fileref = storageRef.child('pdf');
     fileref.put(file).then(function(snapshot){
     console.log('uploaded');
     });
 },

I'm using an element-ui upload component to get the file:

<el-upload drag class="upload-demo" ref="upload" :auto-upload="false" v-show="addItem.subcategory!=''">
  <el-button slot="trigger" size="small" type="primary" style="margin-bottom: 10px;">select file</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
  <div class="el-upload__tip" slot="tip">PDFs no larger than 20 mb</div>
</el-upload>        

And here are my storage rules:

service firebase.storage {
  match /{bucket}/o {
    match /{allPaths=**} {
      allow read, write
    }
  }
}

Most people who've had similar problems have been able to fix them by changing their rules to what I currently have. Any ideas as to what could be causing this?

Answer 1

It turns out that the { bucket } variable was the problem. When I replaced it with the path of my app, which looks something like:

/b/xyz-app.appspot.com/o

I was able to upload documents.

Not sure how the handlebars got in there -- I don't remember adding them.