Cara Upload File Atau Image Ke Firebase Pada React Native

Getting Started

install firebase pada projek kamu

npm i firebase

atau

yarn add firebase

Tambahkan Firebase configuration pada projeck kamu
saya menyimpan Firebase configuration pada root/src/config/Firebase.js isi file Firebase configuration seperti ini :

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "xxxxx",
  authDomain: "xxxxx",
  databaseURL: "xxxxxxx",
  projectId: "xxxxxxx",
  storageBucket: "xxxxxxx",
  messagingSenderId: "xxxxxxx",
  appId: "xxxxxxx",
  measurementId: "xxxxxxx"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export default app;

view button

<TouchableOpacity style={styles.btnUpload}>
    <Text style={styles.btnLabel}>Upload Photo</Text>
</TouchableOpacity>

install image picker
saya menggunakan library react-native-image-picker

npm i react-native-image-picker

atau

yarn add react-native-image-picker

import react-native-image-picker pada file screen kamu, misalkan root/src/screens/UploadPhoto.js

import {launchImageLibrary} from 'react-native-image-picker';

install react-native-uuid

npm i react-native-uuid

atau

yarn add react-native-uuid

import pada file screen kamu

import uuid from 'react-native-uuid';

import firebase
jangan lupa import firebase juga

import React from "react";
import {
  StyleSheet,
  Text,
  TouchableOpacity
} from "react-native";

import uuid from "react-native-uuid";
import { launchImageLibrary } from "react-native-image-picker";
import {
  getStorage,
  ref,
  uploadBytes,
} from "firebase/storage";

import firebase from "../config/Firebase";

Buat function upload photo

const uploadPhoto= async () =>{
    await launchImageLibrary({}, async (response) => {
        if (response.didCancel || response.error) {
            Alert.alert("oops, batal memilih foto.");
        } else {
            let uri = response.assets[0].uri;
            let fileName = response.assets[0].fileName;

            let storage = await getStorage(firebase);

            const rersult = await fetch(uri);
            const blob = await rersult.blob();

            uploadBytes(ref(storage, fileName), blob, {
            contentType: "image/jpeg",
            firebaseStorageDownloadTokens: uuid.v4(),
            }).then(() => {
            console.log("Upload With blob");
            });
        }
    });
}

tambahkan onPress pada button

<TouchableOpacity style={styles.btnUpload} onPress={()=> uploadPhoto()}>
    <Text style={styles.btnLabel}>Upload Photo</Text>
</TouchableOpacity>

Selesai 🚀😎