ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- Hello! Welcome to this video. In this video, you will learn how to access Firebase Storage inside React Native.
If you learned from this video, give this video a thumbs up and subscribe to this channel! To stay updated on all our future videos, click the notification bell!
Expo Documentation on Firebase: docs.expo.dev/...
Code: drive.google.c...
App Development: • App Development
Don't forget to comment down below on what you want to see next (or if you have any questions)!
you are truly a lifesaver... I was searching for hours for why my images weren't uploading properly and your "bytes" fix is exactly what I needed. Thanks!!!!
THANK YOU, A BLESSING FROM THE SKY, fucked 5 hours trying to write the image as bytes
perfect, i was really need it. You so good
Thank You! . Finally it WORKED....
Thank you! your solution worked after searching all day
Truly, simple and complete.
OMG! Thank you very much. Best tutorial ever.
Thank you so much!!!!!!!!!!!!!!!!
This was totally what I was looking for.
You are amazing!
Thank you a bunch, it's been 2 weeks of pain and nail biting 😅 make more videos
loll, same for me when I was first trying to solve this issue. I'm glad this helped!
Fantastic video! Thank you so much for putting this up! Short, simple explanation of a recently-emerged complex problem, and straight to the point :)
Thank you! This was very straightforward!
thank you so much you just code the same as I wanted the one..keep it up
Thanks for this video, was really helpful! :)
THANK YOU SO MUCH
Hello, thank you so much, aunque ya lo sabía pero lo explicas bien jajaja, I love you
thank you ,really helpful video 🔥
can you help me? It's giving this error: WARN Possible Unhandled Promise Rejection (id: 0):
Thanks a lot ! i spent 2hours trying to figure out what was wrong, i just didn't convert the image uri with blob !
that's an easy thing to miss, glad this helped
THANKSSSSSSSSS YOU ARE AMAZING
Thank you so much 🙏🙏🙏🙏🙏You would think uploading a profile image would be simple smh lol but nothing is simple with Firebase and Expo 😂
lol, happy to help :D
actual life saver
Short and well-explained. Thank you so much!
There is an issue with uploadbytes in expo 47, firebasejs 9, and expo custom dev client. Whenever it starts uploading, the promise never resolves nor rejects, so it is impossible to see the cause of the error. Anyone knows the hack to make it uploadbytes work? I desperately look for answers but none of them works
THANK YOU SO MUCH
Hi there, I'm trying to get this to work for Video upload but it doesn't work. The image picker works and allows you to pick videos, so I assume uploadBytes doesn't allow videos? Any idea
I can't find any functions for video so uploadBytes should work? I would suggest looking at the rest of your code to see if there is something wrong there.
it keeps crashing on ios when uploading a video than tis larger than 2mb , any idea why ?
do u have an error message? if it is just taking long time, a 2mb video is pretty big. I'm not really familiar with ways to optimize, but you could start a github error on firebase or react native
why am i getting this error ? : Error: Requiring module "node_modules\firebase\app\dist\index.esm.js", which threw an exception: ReferenceError: Can't find variable: IDBIndex
make sure you have the right version of firebase installed. some peps said that it didn't work with v9, but v8 of firebase, so maybe try that?
I get the same error here 🤔 I heard it might be a bug
@@quickcompilations1714 i looked into the firebase github repo, and it seems like there are lots of comments about a bug
@@the_whiz shooooot yeah it sucks, I guess we'll just have to wait until it gets fixed
Thanks. I'd stuck for hours. It turned out that the most important step is to allow the user to read/write to the storage first.
haha, yep, that gets me tricked every time :) glad you got it figured out
thanks alot
Hi, I can not upload multiple images once. Anyone have solution?
Thanks advance!
I would recommend iterating through a list with all the files within it and uploading them one by one
@@the_whiz thanks you. I has tried and successfully upluad multiple images but can not upload one image now, I use firebase 9.15.0. Have you tried this firebase version and do you have problem like me?
Thanks
How can i get URLs for uploaded images from uploadBytes methods to store the URLs of images in the collection?
Video created! th-cam.com/video/IZNDDIQtt-s/w-d-xo.html
Could you do a tutorial on how to actually get this image from the firebase storage
Video created! th-cam.com/video/IZNDDIQtt-s/w-d-xo.html
Awesome Video ++++++++++++++++++++++++++++++++++++++++++ Thank you
img.blob() is not a function. (img.blob is undefined)
i am getting this error
this is probably caused by what version of firebase you are using. I recommend that you use the one that I have in the video.
it is working fine in IOS but not working at all in Andriod devices
might be something in ur android version code because this should work in both ios and android. feel free to send what code you used and I can try to debug it from there.
Do you have any idea why fetching images from firebase storage is so slow? I tried to make the whole bucket public still slow compared to other resources!
this is my speculation, but I think that react native to firebase is not that developed in documentation and such, so maybe it is just not as fast in react native as they make app -> firebase smoother
Awesome video, thanks so much for this. I had a quick question. I'm making an Instagram clone and I have it where they select the image on one screen before it transitions to another to actually upload. Am I able to simply pass the image as a parameter through react navigation, then use it with the function you created and just replace result with the image variable?
As well, when I do this, I get ".blob() is not a function". Sorry if my info is kind of vague.
you may be passing in a url or a name of the image instead of the image itself. that would be the most likely error.
@@the_whiz Figured it out. Hadn't set up the request for permissions using the useEffect. Appreciate your help!
@@kcash935 awesome, I'm glad you solved it!
my code worked, but it only sends the first image, it doesn't send another, even different images, does anyone have this problem?
I think that you should have a refresh page button that recalls and gets the image. or is that not the issue?
@@the_whiz no, the image goes to firebase, but only the first one, then no more images
@@brnbk8910 check whether the function is called or whether you are changing the image that is sent to the database.
the ref doesnt work... not sure what the problem is for me
could you send your code or explain the problem more?
@@the_whiz Easy fix , I just changed the variable name to something other than "ref" , apparently you cannot use it as a variable name and take the same name from the package
This is the best tutorial on youtube for this . SO THANK YOU SO MUCH!!!!! Please keep making videos
Hey Whiz, images may upload with this code, but videos crash the app in iOS. Any ideas?
This may be because of the packages you installed because the code works (since I've tested it)
Can you send over your package.json? Make sure you have firebase installed.
@@the_whiz I switched to v8.10.0 and now it's working as expected.
@@riskitall7421 Perfect!
@@the_whiz Hey, in my case, using your code, app even crashes when uploading images. Why?
@@adriatorres2918 are you on android or ios? also, even though you downloaded my code, you still have to install the packages yourself into the place you used my code in.
it keeps crashing for me for certain images when using the firebase sdk uploadBytes()! Any idea why keep crashing?
this is most likely a firebase issue, but also could be due to corruption or something that cannot be interpreted in your image.
am having the same problem on ios did you find any solution ?
@@ahmadankadev no I didnt, and I gave up on that :poop firebase bc it also too slow fetching images, Cloudinary works really great altho it seems abit expensive
I solved my problem by routing the upload request to a php server then uploading to the firebase from there
TypeError: Network request failed]
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
i m getting this error too
i have the same error too😓
@@elainefang2001 a set timeout argument error is probably caused by the permissions you have within firebase. for the purposes of this video, make sure that you have:
service firebase.storage {
match /b/fir-storageproject-a0a7d.appspot.com/o {
match /{allPaths=**} {
allow read, write;
}
}
}
I'm getting this error not sure what is wrong?
[Unhandled promise rejection: TypeError: (0, _Firebase.fbStorage) is not a function. (In '(0, _Firebase.fbStorage)()', '(0, _Firebase.fbStorage)' is an instance of FirebaseStorageImpl)]
It may be because you did something like
const ref = ref(...)
In this case, you are using the ref function and ref as a variable, so make sure the ref variable is named something different.
@@the_whiz I changed that and still the same thing, is it possible that storage in fire base doesn’t work with react native anymore? Or Node.js?
When u tried uploading to storage in your app did it work fine?
@@TheSnakebite2000 Yes, it may be because of your firebase version. For lots of people, it doesn't work unless you use version 8.10.0 I believe
@@the_whiz I’m currently using version 9.6.7 and I’m writing all my firebase code using firebase V9, authentication & Firestone work fine just having issues with storage
I couldn't upload my images. I get this error message
"[Unhandled promise rejection: TypeError: ref is not a function. (In 'ref(storage, 'image.png')', 'ref' is undefined)]"
Make sure that you import ref into your project! also make sure that firebase has the right version number
Hi, I tried the below changes, it worked for me:
if (!result.cancelled) {
const storage = getStorage(); //the storage itself
// const ref_con = ref(storage, 'image.jpg'); //how the image will be addressed inside the storage
const ref_con = ref(storage, new Date().toISOString()); //how the image will be addressed inside the storage
//convert image to array of bytes
const img = await fetch(result.uri);
const bytes = await img.blob();
await uploadBytes(ref_con, bytes); //upload images
@@anandvishwakarma933 Thank you, this worked like a charm
@@anandvishwakarma933 thank you soo much bro. I think variable ref and ref() were conflicting due to their same names. Working like a charm now.
@@anandvishwakarma933 Thanks. you save my life bro
This does not work for videos.
does this help? medium.com/react-native-training/uploading-videos-from-react-native-c79f520b9ae1
Hi, I want to first thank you for such a clear and helpful tutorial! I am having some trouble though. I got my app to upload images to firebase however both the simulator and the app running on my phone through Expo will sometimes crash when I add an image but will sometimes be ok. It seems almost random. I'm totally stumped. Any idea why this might be occurring?
It might be the type of image is not supported. For example, if you are storing it as a .jpg, then .png files might crash.
@@the_whiz i am having the same issue when i am on production mode (TestFlight), but on expo go or simulator is fine. and there is no error message, and i do not know how to fix it
@@the_whiz OMG!! You are RIGHT! i am setting the img to jpg, but uploading a png img!!! thanks you are amazing!!!!1
@@qiqiliang7793 yeah np! glad it helped!
@@the_whiz Thank you! I think for me that it crashes if I try to upload another before it has finished the first… so I think I’m all set!
great video and very helpful. Cheers!
Saved my day!
Thank you soo much!! I have a question... how could i then display the image I have now uploaded to firebase to be someones profile picture? (I am making an app similar to tinder)
I tried something like this but im pretty sure its wrong
await updateDoc(doc(db, "users", user.uid), {
imageURL: uploadBytes,
@@natnice2574 Video created! th-cam.com/video/IZNDDIQtt-s/w-d-xo.html
@@the_whiz Wow thanks so much!!