2
votes

Using Angular 7, I'm trying to upload an image with Angularfire2

ts

uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const ref = this.storage.ref(filePath);
    const task = ref.put(file);
  }

html

<input type="file" (change)="uploadFile($event)">

Get the following error:

POST https://firebasestorage.googleapis.com/v0/b/my-bucket-name/o?name=name-your-file-path-here 400

{ "error": { "code": 400, "message": "Permission denied. Could not access bucket my-bucket-name. Please enable Firebase Storage for your bucket by visiting the Storage tab in the Firebase Console and ensure that you have sufficient permission to properly provision resources." } }

I have read that I must add in the [email protected] console as a storage administrator but this did not solve the problem.

enter image description here

My rules in Firebase Storage are:

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

Any ideas?

1
did you find any solution to it?Zain Aftab
I understand that you are attempting to upload a image to your Cloud Storage bucket through AngularFire2 for Firebase and when doing so, a permission error is thrown. I would recommend investigating your issue via the free Firebase support. This would allow for the most effective and appropriate means of support for your inquiry as this team is best suited for issues regarding the Firebase integration for Google Cloud Platform products.KevinH

1 Answers

0
votes

If I'm not mistaken you were using AngularFire and in their documentation, you will see they used my-bucket-name as a placeholder in the providers declaration. Replace this with your bucket name (which I assume is in your environment variables).

@NgModule({
  declarations: [],
  imports: [],
  providers: [
    { provide: BUCKET, useValue: environment.firebase.storageBucket },
  ],
  bootstrap: []
})