CODEWITHSUNDEEP
reactjsfirebasereact-nativefirebase-storage
Saad Ramay
Saad Ramay

Reputation: 152

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

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);
});

Upvotes: 0

Views: 1598

Answers (3)

Turksat46
Turksat46

Reputation: 9

Also, to the others that couldn't fix it with the method samthecodingman provided, try to change some parameters so for example try a shorter child name. code 400 is just a sign of a bad request or in easier terms firebase doesn't like some things you sent to him. I tried to send data with a uuid which was too long and the childchange fixed it for me.

Upvotes: 0

Dallas Baker
Dallas Baker

Reputation: 376

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!

Upvotes: 0

samthecodingman
samthecodingman

Reputation: 26296

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);
});

Upvotes: 1

Related Questions