CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-storage
Sushan Sapaliga
Sushan Sapaliga

Reputation: 334

Firebase Storage Error: 404 - ACCESS_BUCKET

Im trying to upload an image to Firebase storage. When i try to upload the image, i get the error as 404, but i have created the storage in firebase.

Firebase npm version : firebase": "^7.24.0

Error:

code: 404
message: "Not Found.  Could not access bucket \"<project>.appspot.com\""
status: "ACCESS_BUCKET"

Storage Rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

Firebase Initialization:

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
});

export const analytics = app.analytics();
export const storage = firebase.storage();
export default app;

Service JS :

export async function uploadImageCloud(image){
    const storageRef = storage.ref("image/" + image.name);
    return storageRef.put(image);
}

Upload function:

function uploadImage(){
        setDataImageUploading(true);
        uploadImageCloud(getDataImage).then((data)=>{
            console.log(data);
            setDataImageUploading(false);
        }).catch((e)=>{
            console.log(e);
            setDataImageUploading(false);
        });
    }

Any idea where did i messed up?

Upvotes: 3

Views: 3061

Answers (1)

Iman Mahmoudinasab
Iman Mahmoudinasab

Reputation: 7015

I had the same issue and finally I found out that the value of the storageBucket passed to initializeApp is very sensitive data. It should be exactly the bucket name on the top files(without gs://):

enter image description here

in this project for example it is steem-engine-dex.appspot.com.

const app = firebase.initializeApp({
  //...
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  //...
});

Important:

  • storageBucket is case sensitive. e.g. steem-engine-dex.appSpot.com is invalid

  • storageBucket shouldn't include any extra space in beginning or end. e.g. steem-engine-dex.appspot.com and steem-engine-dex.appspot.com are invalid

Upvotes: 4

Related Questions