Error 400 Bad Request while Uploading Image to firebase storage in React Native

0
votes

I am working on react native project connected to firebase. I am =using firebase storage ad=nd trying to upload a file to firebase storage But I get following error.

{code: 400, message: "Bad Request. Could not access bucket quickbuy-a0764.appspot.com","status":"Access_Bucket"}

I tried configuring my permissions but did not work for me. example of Image Uri I am providing to put() is as follows

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAk and so on

Now what should I do to resolve this issue?

let filename = values.images + Date.now();
let uri = values.images[0];
const uploadTask = storage.ref(`images/${filename}`).put(uri);
  uploadTask.on("state_changed", (snapshot) => {
  console.log(snapshot);
});
2
reactjsfirebasereact-nativefirebase-storage

2 Answers

1
votes

firebase.storage.Reference#put() accepts a Blob, Uint8Array or an ArrayBuffer. Because you are trying to upload a Data URI, which is a string, you need to use [firebase.storage.Reference#putString()`](https://firebase.google.com/docs/reference/js/firebase.storage.Reference#putstring).

To do this for a data URI, you would use:

someStorageRef.putString(uri, firebase.storage.StringFormat.DATA_URL);

Next, based on these lines:

const filename = values.images + Date.now();
let uri = values.images[0];

values.images is an array, which means that filename will end up being something similar to "[object Object],[object Object]1620528961143".

As I covered in this answer on your question yesterday, this is a poor way to generate IDs as it can lead to duplicates & collisions - use a Push ID instead.

const uri = /* ... */;

const rootRef = firebase.database().ref();
const filename = rootRef.push().key;

const uploadTask = storage.ref(`images/${filename}`)
  .putString(uri, firebase.storage.StringFormat.DATA_URL);
uploadTask.on("state_changed", (snapshot) => {
  console.log(snapshot);
});
0
votes

Future Use with Version 9 of the SDK

import { getStorage, ref, uploadBytes } from "firebase/storage";

    const uploadImage = async (values) => {
      const filename = values.images + Date.now();
      const uri = values.images[0];
      // Create a root reference
      const storage = getStorage();
        
      // Create a reference to 'images/$filename.jpg'
      const filesImagesRef = ref(storage, 1images/${filename}.jpg);
    
      await uploadBytes(filesImagesRef, uri).then((snapshot) => {
        console.log('Uploaded a blob or file!');
      });
    }

Let us know how this works for you!