Image wont upload to firebase storage bucket in react native

user_13148680 0
Viewed 456

I am attempting to upload an image to my firebase firestore storage bucket. Thus funciton below implements but only uploads a new child as text and not the image it's self.

How can I get the image to upload as a .jpeg/.png or does it have to be converted to some other file type for this to work?

When I use this method:

const testImage = require('../assets/mom.png')

is returning the value '13' in my console.

const storage = firebase.storage();

const sendToStorage = () => {
        const testImage = require('../assets/mom.png')
        
       
        const ref = storage.ref()
        .child('another-child');

        ref.put(testImage).then((snapshot) => {
          console.log('Uploaded a blob or file!');
        });
        
      }
firebase-storage react-native reactjs javascript
2 Answers

What type does require('../assets/mom.png') result in? Firebase can only upload data from a base64 encoded string, a byte[], or a Blob or File reference.

See for a working example, the RNFirebase documentation on uploading files.

user_2091030

I Found this solution online and used a URL reference to my firebase storage bucket to convert my image file to a blob and upload it.

Import firebase storage from the FIREBASE STORAGE CONFIG

import Firebase, {storage} from '../config/Firebase';

Firebase.js (FIREBASE STORAGE CONFIG)

import firebase from 'firebase';
import "firebase/storage";

const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_NAME",
    storageBucket: "YOUR_STORAGE_URL",
   
};

// Initialize Firebase
let Firebase = firebase.initializeApp(firebaseConfig)


// ... before export default statemen
export const db = firebase.firestore()
export const storage = firebase.storage();
export const storageRef = storage.ref();
export default Firebase;

Below converts the image to a blob and uploads it to the firebase storage config set above. The image uri needs to be passed into the function after its accessed from your device. Below it is passed as 'image' into function sentToStorage().

CONVERT TO BLOB

const sendToStorage = async (image) => {

      let uri = image;
      const filename = uri.substring(uri.lastIndexOf("/") + 1);
      const uploadUri = Platform.OS === "ios" ? uri.replace("file://", "") : uri;
      blob()
    

      const blob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function () {
          resolve(xhr.response);
        };
        xhr.onerror = function (e) {
          console.log(e);
          reject(new TypeError("Network request failed"));
        };
        xhr.responseType = "blob";
        xhr.open("GET", uri, true);
        xhr.send(null);
      });
      
      firebase
        .storage()
        .ref()
        .child("user/" + userid)
        .put(blob)
        .then((uri) => {
          console.log(uri);
        })
        .catch((error) => {
          console.log(error);
        });

        '') : image
         
        let formData = new FormData();
        formData.append("image", {
          name: filename,
          type: 'image/jpeg',
          uri: uploadUri
        })
        
        var metadata = {
          contentType: 'image/jpeg',
        };
user_131486800
Related