Uncaught Error: No Storage Bucket defined in Firebase Options. (WEB)

Question

I tried to upload a file(image) on firebase storage. but it consoles an error saying "Uncaught Error: No Storage Bucket defined in Firebase Options." . This is my code

const fileUpBtn = document.getElementById('photoUpload');
const selectFile = document.getElementById('selectedFile');
const postIt = document.getElementById('postIt');

fileUpBtn.addEventListener('click',function(){
selectFile.click();
}
);
selectFile.addEventListener('change',function(e){

var file=e.target.files[0];
var filename = file.name;
console.log('/postPic/'+filename);
var storeLocation = storage.ref('/postPic/'+filename);
var uploadTask=storeLocation.put(file);  
});

I tried by allowing storage for any users but that situation also consoles this error.

Answer 1

It's likely the "storageBucket" option in the Firebase config is an empty string. It seems to default to an empty string unless "Storage" has been initialized on the console interface.

Go to your firebase console, initialize "Storage" by accessing it on the Firebase console interface, and then copy the new value for "storageBucket" from the firebase config into your app.

Your firebase config should look something like this.

{
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "my-app-a123z.firebaseapp.com",
  databaseURL: "https://my-app-a123z.firebaseio.com",
  projectId: "my-app-a123z",
  storageBucket: "my-app-a123z.appspot.com",
  messagingSenderId: "123456789012"
};

Answer 2

If you got this issue working on angular. You must specify the storageBucket link on your enviroment.prod.ts Since when you deploy your project, it will use the production variables and files.

export const environment = {
 production: true,
  firebaseConfig : {
    apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
    authDomain: "your-app_name.firebaseapp.com",
    databaseURL: "https://your-app_name.firebaseio.com",
    projectId: "your-app_name",
    storageBucket: "gs://your-app_name.appspot.com/", //REMEMBER TO ADD IT HERE
    messagingSenderId: "604005378047",
    appId: "1:604005378047:web:ab0cdef3gh123456"
}};