ReactNative app #6 : Save data to firebase storage

To save data, first we need to upload an image into the firebase.

https://firebase.google.com/docs/storage/web/upload-files

Before uploading the image, we need to convert image to the blob file.

A “blob” file, short for “Binary Large Object,” is a type of data storage format used to store binary data as a single entity. Blobs are typically used to store large objects such as images, videos, audio files, and other multimedia data, as well as binary data like executables or documents.

const onSubmitMethod=async(value)=>{
    value.image=image;
    console.log(value);
    // Conver Uri to Blob File
    const resp=await fetch(image);
    const blob=await resp.blob();
}

• need to live Storage in firebase console

• need to change rule as true

• Initialization of storage

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

export default function AddPostScreen() {
	const storage = getStorage();

• upload file

const onSubmitMethod=async(value)=>{
    value.image=image;
    // Conver Uri to Blob File
    const resp=await fetch(image);
    const blob=await resp.blob();

    const storageRef = ref(storage, 'communityPost/'+Date.now()+".jpg");
    uploadBytes(storageRef, blob).then((snapshot) => {
        console.log('Uploaded a blob or file!');
    }).then((resp)=>{
        getDownloadURL(storageRef).then(async(downloadUrl)=> {
            console.log(downloadUrl);
						value.image = downloadUrl;
						// Add data 
            const docRef=await addDoc(collection(db,"UserPost"),value)
            if(docRef.id)
            {
                console.log("Document Added!")
            }
        })
    })
}

• add more information like name, email, imageUrl

initialValues=

import { useUser } from '@clerk/clerk-expo';

...
const {user} = useUser();
    
... 
.then((resp)=>{
    getDownloadURL(storageRef).then(async(downloadUrl)=> {
        console.log(downloadUrl);
        value.image = downloadUrl;
        value.userName = user.fullName;
        value.userEmail = user.primaryEmailAddress.emailAddress;
        value.userImage = user.imageUrl;

• add loading

const [loading,setLoading] = useState(false);

const onSubmitMethod=async(value)=>{
    setLoading(true);
    ...

    const docRef=await addDoc(collection(db,"UserPost"),value)
    if(docRef.id)
    {
        setLoading(false);
        Alert.alert('Success!!','Post Added successfully')
    }

• add view component in submit button

<TouchableOpacity onPress={handleSubmit} 
    style=
    disabled={loading}
    className="p-4 bg-blue-500 rounded-full mt-10">
{loading?
    <ActivityIndicator color='#fff' />
    :
    <Text className="text-white text-center text-[16px]">Submit</Text>
}
</TouchableOpacity>

in firebase console