Ultimate Guide to Uploading Media Files to Firebase Storage with React Native Expo | New Approach

Welcome back to another exciting React Native Expo video! In this updated tutorial, I'm Rohit, and I'll guide you through the new approach for uploading media files to Firebase Storage using React Native Expo apps. The previous method has become obsolete due to Expo SDK upgrades and changes in dependencies. But worry not, because I've got you covered with the latest techniques.
🔥 What You'll Learn in this Video 🔥
I'll walk you through the entire process, step by step:
Initializing your Expo project with the blank template
Installing essential dependencies: Expo Image Picker, Expo File System, and Firebase
Configuring your app.json for expo-image-picker
Creating the "source" folder and writing code in "index.js"
Setting up Firebase configuration keys in "config.js"
Establishing Firebase Storage setup for seamless media uploads
A detailed breakdown of the code in "index.js"
Testing your application's functionality
Uploading images and exploring potential for video uploads
𝐁𝐨𝐨𝐤 ( 𝐅𝐫𝐨𝐦 𝐂𝐨𝐝𝐞 𝐓𝐨 𝐂𝐨𝐧𝐧𝐞𝐜𝐭𝐢𝐨𝐧𝐬: 𝐀 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐞𝐫’𝐬 𝐠𝐮𝐢𝐝𝐞 𝐭𝐨 𝐛𝐮𝐢𝐥𝐝𝐢𝐧𝐠 𝐚 𝐬𝐨𝐜𝐢𝐚𝐥 𝐜𝐚𝐫𝐞𝐞𝐫 )
Amazon India: amzn.eu/d/axYh0B4
Amazon Worldwide: a.co/d/acqJOYR
Gumroad (pdf): ninza7.gumroad.com/l/codetoco...
My social Links:
Instagram: / _ninza7
Twitter: / _ninza7
Website: ninza7.me
Discord: / discord
Video widgets edited by: / kaushal_2319
Music Source: NCS
Tags: React Native Expo, Firebase Storage, Expo Image Picker, Expo File System, React Native Media Upload, Firebase Configuration, React Native Expo Tutorial, New Approach, Mobile App Development, Coding Tutorial, Developer Community, Software Development, Frontend Development, UI/UX, Programming, Mobile Development, App Development, JavaScript, Expo SDK, React Native Development, firebase tutorial
#reactjs #javascript #reactnative #ios #android #react #firebase

[@angelosoyannwo6559]

Great vid and mostly worked for me. Thank you very much

[@BugNinza]

Keep supporting 🙌

[@user-vz7pl3ph1z]

Great work! Been trying this for DAYS! Thanks

[@BugNinza]

Glad it helped! Keep supporting

[@Kitten_Stomper]

Me too!

[@kelvinso8640]

Thanks, this is amazing

[@BugNinza]

Keep supporting 🙌

[@jeetpatel1619]

Thanks Bruh

[@BugNinza]

Keep supporting 🙌

[@shadekurrahmantamgid6115]

Thanks bro

[@BugNinza]

Keep supporting 🙌🏻

[@fatimaperezlara8817]

Thanks

[@trankhai6922]

it's very helpful for me
thanh kiều ve ry múc

[@BugNinza]

Keep supporting 🙌🏻

[@AndreyEscobar]

Thanks bro!
It works absolutely fine!
I have a code that use Firestore and now your code that use Storage.
I would like a tip to use Firestore and Storage at the same time, for use to save some information about the image.
Do i have to save the uri of the storage image in the firestore?
Did you have a video with both?

[@BugNinza]

Yes! You can save the URI of the image to the firestore. I'll make a video on this topic very soon.

[@AndreyEscobar]

@@BugNinza i got with this code:
ref.getDownloadURL().then(function(url) {
console.log(url);
});

[@souravnag6670]

why xmlhttprequest onerror going executed when i want to upload pdf file

[@thiagojesusmachado2822]

do you can show that code on github ?

[@RafaelLima-kl3gl]

Hi, thank you it worked, you can show how to upload documents PDF? i tried to code with expo document picker but its not working

[@BugNinza]

check this: czcams.com/video/syK7ZSnmRUk/video.html

[@SahilSingh-ct2oy]

Great tutorial!
How do I upload multiple images to firebase storage?

[@BugNinza]

const [images, setImages] = useState([]); // Use an array to store selected images
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.All,
allowsEditing: true,
aspect: [4, 3],
quality: 1,
multiple: true, // Enable multiple selection
});

[@RitikSuntwal]

Can you please do a video on how to upload pdf file instead of image to firebase. I’m having trouble.

[@test-yu2vn]

Can plz create a video of react drawer navigation (Menu) along with sub drawer navigation (submenu) example

[@BugNinza]

Noted

[@brenolins9908]

How do i get the url from the image on firebase after uploading it?

[@semajroyam3725]

i just wanna know if you get it now bro? if yes then i'm going to implement this too haha

[@mschervesnquy]

hey how do i create a doc in firestore with the url of the image in storage?

[@BugNinza]

It's a bit complicated! The UID of the storage file should match the UID of firestore. I'll upload a video soon. Stay tuned!!

[@mschervesnquy]

@@BugNinza right!! thank u for the answer. ill wait the video

[@user-ic3pp1dv1p]

bro i got this error
[FirebaseError: Firebase Storage: User does not have permission to access '13554c90-a7bc-49db-bd71-a337bd5d1605.jpg'. (storage/unauthorized)] what to do

[@BugNinza]

Check your rules of the firebase storage. If you think you messed up bad. Then start fresh and follow the video step by step

[@Mutepuka88]

This code works fine on IOS but on android it keeps giving a Network Request Failed error when fetching and using blob responses. any idea how to fix this ?

[@BugNinza]

I have tested my code on Android, as you can see in my video. You might be committing some kind of mistake. Check your code.

[@souravnag1154]

In Android I am also getting same error

[@Priyanka2k01]

When will you make a video on how to save the URI of the image to the Firestore?

[@BugNinza]

You mean upload and save the uri of the image to the firestore at the same time?

[@timiskiswrld4351]

Yes bro..​@@BugNinza

[@akifkhan2402]

Yr ek complete video banao like social media app firebase p

[@BugNinza]

On it 😀 stay tuned

[@akifkhan2402]

Thanks brother