Uploading Images to Firebase Storage in React Native 

haha, yep, that gets me tricked every time :) glad you got it figured out

loll, same for me when I was first trying to solve this issue. I'm glad this helped!

that's an easy thing to miss, glad this helped

lol, happy to help :D

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

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.

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

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

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!

Video created! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IZNDDIQtt-s.html

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

Video created! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IZNDDIQtt-s.html

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.

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.

I tried something like this but im pretty sure its wrong await updateDoc(doc(db, "users", user.uid), { imageURL: uploadBytes,

@@natnice2574 Video created! ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IZNDDIQtt-s.html

@@the_whiz Wow thanks so much!!

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!

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

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.

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

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.

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

does this help? medium.com/react-native-training/uploading-videos-from-react-native-c79f520b9ae1

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; } } }

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