Im trying to create a signup form for my website. Im storing the user information on MongoDB and their images on Firebase. When Signup button is pressed i get "POST https://firebasestorage.googleapis.com/v0/b/app/o?name=image.jpg 403" in the browser's console

I have seen several tutorials on how to upload files to firebase storage using React.js and this is what i tried:

const [file , setfile] = useState(null);

const handleClick = (e)=>{
    e.preventDefault();
    const fileName = new Date().getTime()   file?.name;
    const storage = getStorage(app);
    const StorageRef = ref(storage , fileName);
    
    const uploadTask = uploadBytesResumable(StorageRef, file);
    uploadTask.on('state_changed', 

  () =>  {
    // Handle successful uploads on complete
    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
    //signup() is the node js signup endpoint
      signup(dispatch ,{email , password , username , phonenumber , profile:downloadURL});
      })
    });

  }

Image field:

<input type="file" name="file" id="file" onChange={(e)=>setfile(e.target.files[0])} />

If is needed to upload any other part of the code please let me know

CodePudding user response：

Based on the comments under your question you get a 403 error because your Security Rules prevent any user to upload a file (allow read, write: if false;). This is also a point listed by @eugenemusebe in his answer.

You need to adapt your Security Rules in such a way the desired users have the correct access right for writing:

For example a user needs to be authenticated to upload an image:

service firebase.storage {
  // The {bucket} wildcard indicates we match files in all Cloud Storage buckets
  match /b/{bucket}/o {
    // Match filename
    match /filename {
      allow read: if <condition>;
      allow write: if request.auth != null;
    }
  }
}

More details in the Security Rules documentation.

---

Note that for testing (and confirming that this is the problem) you can (temporarily) open the write access with:

service firebase.storage {
  // The {bucket} wildcard indicates we match files in all Cloud Storage buckets
  match /b/{bucket}/o {
    // Match filename
    match /filename {
      allow read: if <condition>;
      allow write: if true;
    }
  }
}

CodePudding user response：

There are a few potential issues that could be causing the error you're seeing:

1. You might not have the correct permissions to upload files to your Firebase storage bucket. Make sure you have the correct roles and permissions set up in the Firebase console.
2. There might be an issue with your Firebase storage bucket configuration. Check to make sure you've set up your storage bucket correctly and that it is accessible from your app.
3. There could be an issue with the way you're sending the file to the Firebase storage API. Double-check that you're using the correct API endpoint and that your request is formatted correctly.
4. There might be an issue with the file itself. Make sure you're sending a valid file type and that the file is not too large to be uploaded.

Without seeing the rest of your code, it's difficult to pinpoint the exact cause of the error. I recommend trying the above suggestions and checking your Firebase console for any error messages that might provide more information on the issue.