Upload images to Firebase storage from a Flutter app, and display them on the UI.
Vložit
- čas přidán 30. 08. 2022
- In this video, you'll learn how to "Upload images to Firebase storage from a Flutter app and display them on a ListView"
SOURCE CODE: github.com/gitanjal/flutterfi...
Flutter + Firebase CRUD tutorial: • Flutter+Firebase begin... - Věda a technologie
Thank you for this video, i was stuck and I watched many before I found it, it really helped me with my graduation project 🙏🏻🙏🏻❤️
Glad to know it helped! Stay connected.
@@droidmonk4820 the problem is, while awaiting for the download URL to be ready, the user keep getting the “please upload an image” message, which would be confusing, any ideas of how to make the UX better?
Hi,
You can display a loader during the process.
You can declare a boolean to determine whether to display a loader.
Then inside the onpressed function on starting the process of upload you can make the boolean true and call setState() and make that false again once upload is complete.
Give it a try, and reach out if you face any difficulty.
Same issue was with me, but this person solved it.
Bro, excelent video. Other youtube videos about upload photos to storage are outdated. Apart from that your explanations are wonderful. Greetings from Argentina!
I am glad that you liked the video, and thank you very much for your comment. Feeling motivated...
explained pretty well and easy to understand!! Keep it up and thanks it really helped...
Glad you liked it. Thanks for commenting, stay connected.
Everything worked wonderfully to integrate into my app. Thank you for this tutorial good sir.
Glad it helped, thanks for commenting. Stay connected.
thank you sooo much , i struggled so much with this image thing , you explained it very well
Glad it helped! Thanks for commenting, Stay connected.
Awesome video, super helpful for my app, thanks so much! 👍
I am happy to know it helped. Stay connected.
Thanks a lot dear! The way you teach is much better then others.
So nice of you, Stay connected.
@@droidmonk4820 I'll
I was stuck with this but this video really really helped me!!... Thank you very much!!
Glad it helped! Stay connected.
thanks this is really help me a lot, flutter tutorial doesnt have so much in youtube like other language
Glad to know it helped 👍 Stay connected
Thank teacher for your video. Your video is so effective for me .Thank teacher 🙏
Glad to hear it helped. Thanks and stay connected.
Thank you! You solved my problem!👍👍
Glad I could help!
Thanks you bro. From Kyrgyzstan
Welcome bro, stay connected
Really awesome tutorial! Thank uu
Glad you liked it, stay connected.
thanks for the tutorial and it's very clear
Glad to hear that! Stay connected.
Sir I love your firebase playlist.
Glad to hear that. Stay connected.
Thanks for commenting.
thx u very much bro, u are more meritorious than my lecturer who taught Flutter Firebase
Glad to know that my video helped, thanks for commenting . Stay connected.
Thank you brother for this ulpfull tutorial; you really solve my problem
Glad to know it helped. Stay connected.
The best video and best firebase playlist
Thank you very much, Stay connected.
it really helped me, thanks :)
Happy to know that, stay connected
Amazing turtorial
Glad you liked. Stay connected.
thank you mister , ur video is very useful
Glad to hear that, thanks for commenting . Stay connected.
very good explanation, Sir 💯👍
Thank you , Stay connected.
Super helpful thanks so much
Glad it helped!
Thanks for commenting, Stay connected.
Thank you so much for the video. Its very detailed and comprehensive. However I seem to be getting this error when I try to run the app. "Error: The argument type 'Future
Function()' can't be assigned to the parameter type 'Future Function(App)?'.
- 'Future' is from 'dart:async'.
- 'App' is from 'package:firebase_core_web/src/interop/app.dart'" Please help... :)
Excellent video ....
Glad you liked it, Mansi. Stay connected.
this is probably the best explanation available for how to load and retrieve image on firebase storage. but one problem when we take a new camera picture, it overlaps the previous one because of same name 'name'. how to tackle that as we will not be able to call the previous image from firestore DB though the url get saved there but they all point to same picture in storage.
You can create a unique name for your file and create a reference with that name, you can use the current timestamp to create the unique name. I think I have mentioned that in the video!!!!
And regarding accessing the file through its url, I have created a separate video on the topic. (czcams.com/video/t0nWkruqFO4/video.html)
I hope this will help.
Thank you so Much sir
Welcome, Stay connected.
mannn thank you so much
You're welcome!
Thanks for the comment, Stay connected.
Thanks Man
You are welcome, Stay Connected.
good tutorial
Glad you liked it, thanks
very helpful
Glad it helped. Thanks for commenting, STAY CONNECTED.
what emu do you use?i use Pixel 4 api 33 and cant open camera
Hi @noikundesuka, In this video, I am not using an emulator, it's a real device. I am using the tool named Vysor to display it on the screen.
very nice
Thanks. Stay connected.
thanks a lot 🙏
Most welcome! Stay Connected.
Thankssss🖤
You are welcome, stay connected.
Does anyone got this Error after trying to upload the image ?
FirebaseException ([firebase_storage/no-bucket] No default storage bucket could be found
Here are some possible causes and solutions:
Missing Firebase configuration: Ensure that you have properly configured Firebase in your Flutter project by following the setup instructions provided by Firebase. This includes adding the google-services.json file for Android or GoogleService-Info.plist for iOS to your Flutter project.
Incorrect Firebase initialization: Make sure that you have initialized Firebase correctly in your Flutter app. This is usually done in the main.dart file using Firebase.initializeApp().
Missing or incorrect bucket name: Double-check that you have specified the correct default storage bucket in your Firebase project settings. The bucket name should be in the format gs://your-project-id.appspot.com.
Permissions issue: Ensure that the Firebase Storage service is enabled for your project and that the necessary permissions are set correctly. Check the Firebase console to verify the project settings.
Network issues: Sometimes, network issues can also cause this error. Ensure that your device has a stable internet connection and can access Firebase services.
Outdated Firebase SDK: Make sure you are using the latest version of the Firebase SDK for Flutter. You can check for updates using Flutter's package manager (pubspec.yaml).
You can also try the solution of the link below:
stackoverflow.com/questions/70763172/flutter-firebase-storage-not-woriking-no-default-bucket
Thanks
Welcome, stay connected.
Hi! Very well explained video,! I'm not getting any errors but when I select the image in my iOS app, it doesn't follow through with creating the folder nor uploading the image. Any special config for iOS is necessary? Thanks!
Hi,
If it is not working then you should be able to find some information about the error in the log. If you can find it please share, it help in understanding the issue.
Is it working in Android?
Thanks for reaching out.
@@droidmonk4820 Hey! Thank you for the quick response. The issue is the following: flutter: Error caught: [firebase_storage/unauthorized] User is not authorized to perform the desired action.
Plz help me - How to solve this error :
Invalid argument(s): No host specified in URI file:
It seems you are passing wrong url somewhere. Once check the code where you are creating the reference, or any other places where you are using any URL.
I want to ask how to update when user selects another image, that image has to be updated both in Firebase storage and cloud firestore ?
Yes, you have to update in both the places, and you'll also need to delete the existing file.
@@droidmonk4820 Can you make a video tutorial? Please!
Sure, I'll let you know on this comment itself once I publish it.
czcams.com/video/t0nWkruqFO4/video.html
Sorry for the delay, I hope you have already figured it out.
Hello,
When i click one of the items in order to display item details it show the following error
: type null is not a subtype of type string flutter
The value you are passing to the details page is null for some reason. Try using the debugger or simply print the value that you are passing to the details page and verify it is correct.
Also keep in mind: you will need to install firebase to you Flutter project before using Firebase services. (czcams.com/video/kwLz-0e6Eo0/video.html)
Thx you for replying,
Now it’s show me details page when i click on item but it show anything say Type Null is not a subtype of Map
I’m using an android device
There may be two possible locations of error:
1. Inside the details page, you may have defined a variable of type Map to hold the data that you pass from the list page. But some reason you passing null
2. Inside the builder function of the FutureBuilder while getting the API response from snapshot.data. You may be getting null as the response. Check whether using the correct reference or not---
_reference = FirebaseFirestore.instance.collection('shopping_list').doc(itemId);
Thank you very much for the lesson. Do you have a lesson on how to upload videos? Not photos, but videos.
Not yet, I shall try to create one.
And thanks for commenting, stay connected.
@@droidmonk4820 ok, bro💪🏻
the code putfile(File(file.path) ..... File has an erorr says File is not a function
You may have imported a wrong library
when i clicked on the images in firebase it doesnot preview the image . kindly let me know how to preview images
On clicking the image the preview should appear on the right, and below the preview the file name appears, on clicking the file name the image is opened in a new tab.
@@droidmonk4820 but its not shoing on right and also not op3ning jn new tab rather it is downloading when i clicked on the name of image
im getting an error in await referenceImageToUpload.putFile(File(file!.path)); i dont know why
What is the exact error you are getting?
Go to your imports at the top make sure you have "import 'dart:io';" and if you have the html import that automatically got added by your IDE remove it.That worked for me
@@zanderv.l5607 Thanks for your suggestion, really appreciate it. I hope it helps Alice.
@@zanderv.l5607 Thanks dude
can you do that in realtime database sir? badly needed it
I shall create for sure, but I'll take some time. Stay connected.
it show error bro:Unhandled Exception: [firebase_storage/no-bucket] No default storage bucket could be found. Ensure you have correctly followed the Getting Started guide. anyone clear this problem
Here are some possible causes and solutions:
Missing Firebase configuration: Ensure that you have properly configured Firebase in your Flutter project by following the setup instructions provided by Firebase. This includes adding the google-services.json file for Android or GoogleService-Info.plist for iOS to your Flutter project.
Incorrect Firebase initialization: Make sure that you have initialized Firebase correctly in your Flutter app. This is usually done in the main.dart file using Firebase.initializeApp().
Missing or incorrect bucket name: Double-check that you have specified the correct default storage bucket in your Firebase project settings. The bucket name should be in the format gs://your-project-id.appspot.com.
Permissions issue: Ensure that the Firebase Storage service is enabled for your project and that the necessary permissions are set correctly. Check the Firebase console to verify the project settings.
Network issues: Sometimes, network issues can also cause this error. Ensure that your device has a stable internet connection and can access Firebase services.
Outdated Firebase SDK: Make sure you are using the latest version of the Firebase SDK for Flutter. You can check for updates using Flutter's package manager (pubspec.yaml).
You can also try the solution of the link below:
stackoverflow.com/questions/70763172/flutter-firebase-storage-not-woriking-no-default-bucket
that is a very useful video but i have an error which catched by try & catch which said (Unsupported operation: Platform._operatingSystem) can you please help me
On which platform are you running the app- Android/iOS/Web ?
@@droidmonk4820 web
I'll try to replicate it and let you know if I can find out the issue.
I had the same issue, I fixed it by making sure I had the import import 'dart:io'; , and instead of try catch blocks I had to make if (!kIsWeb) {} and if(kIsWeb) conditions first. KisWeb are conditional to let your code know if you're running on a web app or an android/iOS application. inside these blocks you can add the try and catch methods.
Hi Mariam, I am extremely sorry as I could not explore the issue you had, in time. I hope Ricardo's solution helps. Thanks Ricardo.
unfortunately, that doesn't work in web app :(
What error do you get?
Can you share some info from the stack trace!
imageUrl is not getting url ?
Hi Rajesh,
please verify whether you are using the correct field name while parsing the data , and that you have a value for the field in the corresponding firestore document.
@@droidmonk4820
ImagePicker imagePicker = ImagePicker();
XFile? file = await imagePicker.pickImage(
source: ImageSource.gallery);
print('image path ${file!.path}');
if (file == null) return;
String UniqueFileName =
DateTime.now().millisecondsSinceEpoch.toString();
Reference referenceRoot = FirebaseStorage.instance.ref();
Reference referenceDirImages =
referenceRoot.child('images');
Reference referenceImageUpload =
referenceDirImages.child(UniqueFileName);
try {
//store the file
await referenceImageUpload.putFile(File(file.path));
//print(referenceImageUpload.getDownloadURL());
imageUrl = await referenceImageUpload.getDownloadURL();
} catch (error) {
print(error);
}
Take a look at the console , check if you have got any error message.
can you upload the src code please
Take a look at the branch upload_image of the repository below.
github.com/gitanjal/flutterfirebasedemo/tree/upload_image
Thanks for commenting bro, I forgot to add the link.
@@droidmonk4820 thanks
Stay connected, next video will be published by tomorrow.
اخ ليااااااا
8:39
Hi, Is there anything specific at this timestamp?
@@droidmonk4820 Oh no just for personal reference where I left off. Thank you!
Cool.
Stay connected.