Upload image to firebase storage from your gallery in flutter

okay guys uh today I'm talking about how to upload your image to firestore database I mean just pick some random emails from your gallery and upload it to your Firebase that you can use your project elsewhere okay so uh first of all uh here is my project I have nothing here just connected my flutter which is I shown you in my previous video see and I am using get text State Management so here you can see I have you import the package gate and for this project you will just knit file Space Storage package okay and Cloud first should not need it in this video tuning but you will just need Firebase storage and Firebase code for this project and I am using gatex so for you if you want to eat get X just use this package git okay so home page in the home page in the main app just call the home page another home page is ever [Music] and Sophia and the column is empty so nothing is sure so first of all we want to show you in image in this project suppose uh first of all make an elevated button uh test you urge Mark sorry remove the cost it's annoying sometimes okay so make the celebrating button only Center okay so our button is done so for basically use this button we have to create a controller so first of all you have to directory which is entroller that file image picker controller so for figure image from gallery web you need a package which is involts clicker filter sugar okay singers image by this in a speaker package okay speaker I'm just copying this line I don't need actually this oh sugar critics okay our package is done so controller name is like Plus image bigger controller experience and cables Ctrl Rush so yeah so it's automatically important dot religious so now first of all I have to initialize a value so before initiating image value I'll just try our method first like future I'll just call this packet metalists functions speed image so in the future we need some ascendant effort so let's say uh no take a variable it's final image Peak equal to L Word image picker see here's the image speaker so it is import the image speaker package okay so after the Peak image now the source source is image source so sorry English source now here is two times the camera or Gallery camera Miss if your select camera it after you click the button it will open your camera and you click a picture then the picture will collect to your apps and from Gallery means if it will import from your so you are using gallery today if you want to use camera you can try it okay same method okay Gallery so the final image speak is it will collect from the gallery the image and there is any store in this image big variable okay so if now quite sorry now I click on Mission make if image Peak equal requirement I mean some kind if it is now so then return nothing uh let's wrap it with try and catch Shining first try this method okay so I like this line so we are using try on this method after try this package if the respirational then nothing then we're returning uh another variable this image speak have to has to return a file path so image damn that's the variable which is Phi data okay is need the dot IO import package support so what is our path our path is this galleries image so image speak dot but so we collect the path I mean directory our imported image so so we have to pass this image term value outside this function so first we need another uh file another string file and will show you why so I am using a text so it is rx file like image equal to file the path path is signal by this null I will tell you and obvious the observation value so if it is changed or anything we will change something in our app so you know try so in our Drive first of all image speak is import Gallery import image from gallery then this value open till value path will go to his image step so we transfer image stem value in this image so what is said uh just image not the value so basically the first open image value is just a string we can know nothing okay this is the value of this image so so we have to initialize RS value as a variable then dot fellow then equal to Ms tag so we will collect image from gallery then the path will be stored in another variable and the variable will go to your image if we use this function with a button okay now our try is done so for this try you have to use um platform exception if some kind of hero we some will use sketch to return just if we have somewhere so our image pick is done so first we show you uh just to show you and pick your image and show you in gallery so an elevated button we will have to use another like container container okay so content now is child child has that image okay childhood it will depends on something if okay let's create a controller final controller won't wall and create dot put our image what is the name of the L Plus in the hospital controller in the speaker controller so I did so condolences so child if if will not use if so if the image variable is I mean sorry image variable so I'm going to image so image Dot sorry controller dot image dot value if it is null then it will show an icon I mean I can't icons Dot camera item otherwise it will show image dot file image by the path part is controller to download and Dot path and we have to initialize another path is tenu dot well okay with no we don't even need this filing messages deleted it up to an army foreign so basically uh first of all our image value is null I mean this empty string so if this will be interesting then it will show in a camera and if we in input some image from gallery it to Value will be changed and by this this line it will transfer the value to this image and it in which is I doing change the state so for change this state we have to repeat with OBX so basically I'll restart the app okay so the image our value is X our code is fine because if this if this is equal to empty string it will show in this camera so it will work in fine let's say 50. okay otherwise image failed and the path so let's uh use this big image method in our Elemental battle p s sorry controller Dot Big Image okay let's run the app okay app is okay we'll speak image okay some error I think lets me find it oh I am not stop and restart the app after the image speaker in packaging Port so that you know what now fine so it basically image from our Gallery I think will download okay let's select the picture okay see our feature is shown so I want to create another bottle I mean and another button like is uh a little bit button and it takes a close to star in place to which so when you click the image it will upload in our fire restores so in the previous video I show you how to connect now I will show you how to upload image in this file storage okay there is a project that has been built the stories get started okay in production mode I will use it in testing mode actually okay interesting one okay if you want to use up testing mode is okay for our now let's create storage wait for it our stories creating done we can upload file from here also create a folder but we will not doing anything in here just we everything we do in this project Okay so how it will work let's go to in our controller and then create another method that will upload our image in our Firebase store let's create another feature so basically it will return a string I know and what is this string if we upload a picture in our Firebase storage it will generate a link so we will use this link everywhere in our project so it should be easy to identify our image so future a spring upload image blue wire base so in the future we have to use as saying certain first if you upload a picture it will have to be some file name so what is your file name if you want your name then after it is an extension like jpg or PNG so a string file name equal now I'm just switching in date and time so the date and time is fine for main date sorry date time dot now when you upload your picture it will take this is millisecond for foreign [Music] we use click of reference by reporting okay for me for this is training okay equal fire base stories it will import our Firebase storage package dot instance dot Reef okay now that's Charlie and this is the important path just follow so the path is actually Minister child path is actually in our project directory so if you want to create a folder then upload the picture in this folder you have to write it like my picture okay my picture so it will create a my picture folder on the directory then slash mean in the folder to file name our file limits in this file name so copy it and call the variable it's dollar sign and then file name after file name you have to use an extension like I am using PNG okay so our reference is done now a weight therefore yes dot put file into so actually which file it will be upload see our image speaker it will pass the value to our image and that will show in our image so we will pass this image value in the file so image hello because it's RX variable so we have to use the dot fellow okay now our picture selection is done for uploading so now get the URL after uploaded image it will generate a URL so how to get it so for getting the alert is string download URL hair wave reference Dot get audio is simple just to get downloaded so in the downloaded Railways will store in the download URL variable okay now return download URL it will just return it if you want to print it you can print it we have to use otherwise moment okay authorized and let's sketch exception if someone cancel return is so why this industry if is written nothing so the picture will not upload it just I have to use return for null simply sorry it is so okay okay there's no problem okay so our upload PK upload image is function is done now call the function in the elevated battery so controller dot upload investor Firebase let's restart the app and go to our various link you see we have nothing in our project yet just under speak image like this one okay upload to Firebase okay let's reload our browser see my picture the time ultimate our picture is uploaded so how to use your link or get you link so just how to show your image after upload or getting here just another image .network Network is the controller top download so basically you need to so passing the download URL and just make it yeah RX string uh Network team is equal invert image equal now dot oh yes because okay foreign so we will use like a network image dot hello equal download urine so we fast the downloaded your Leno Network image so basically if you want to show this picture and just go image dot Network controller dot Network image without the value and see if it's work because we don't interact with okay and uh I think some is uh blue string I think so let's find Google find error and basically it will have to wrap it with OBX so VX okay just run the app we stop there okay just upload a picture first picture okay our image is showing and we have uploaded so many pictures so it will go it will have so many picture so we have four picture so so if you want to use the string value every time you upload you have to go for this like uh like me I mean just download URL it will return the download URL so you have to use here you can transfer anywhere the URL and you can use URL so it's all for today how to upload your image to your firestore database thank you all

Channel: Flutter With NAS

Views: 2,285

Keywords: flutter, android, android studio, flutter programming, dart, dart language, flutter with dart, flutter with android studio, beginners, flutter for begginers, flutter tutorial, tutorial, widget, how to flutter, firebase, firebase storage, upload image in firebase, upload image firebase storage, image flutter, import image from gallary in flutter, firebase image import, get image from firebase

Id: LT4viT0UNr0

Length: 27min 27sec (1647 seconds)

Published: Sat Jul 15 2023