Flutter Tutorial: Google Photos File Upload

hello guys in today's video we'll be talking about how to use flutter with the google photos api to upload photos to the google photos um so to start we need to go to the google cloud console and create a new project so yeah let's do that so um to click on the new projects create projects okay we're going to call it the google choose upload and then creates so now we have our projects created we need to get the client id and also enable to enable the google photos api in our projects to do this we need to go to the apis and services menu on credentials then okay first we should enable the apis we need that is the google photos api so go to enable enabled apis apis and services now we have enabled apis and services can click on the enable api apis and services i search for google photos photos it does library api and enable now we have to go to the credentials tab our credentials and now create credentials we need a client's id flicker consent screen external save and continue um the scopes you need to choose the google photos scope um so the photos library scope the first one and updates save and continue test users let's add test user 7 continue now we can go back to the credentials creates a client id location type ios bundle id okay i have to get that xcode double id now we have our client id here i'm going to store it somewhere my constant file okay so now we have our client id that we have our client id we can go ahead and import our plugins and packages for this tutorial we'll be using about three packages the google api api is off the array launcher and the file picker the google api api is off for getting reason to obtain um authenticated hpv clients that we can use to send the request to the google photos api and the error launcher will work alongside the photo if google api is off and if i pick a reason to pick the um the photos the photo that i'll be uploading so without further ado let me add in the packages okay now that we have our packages we can go ahead and start actually writing our code so the first thing we'll probably have to do is run what we have right now what's the m screen we have a bot theme to upload image and then we have our photo services our photos service we are going to write the api requests and all so first we need to start by getting our http clients finance values are consent client id and our scopes for the scopes we only really need one scope which is the good photos scope so put our scopes and then the user prompts these options basically supposed to launch the url in which the user will be able to log in from [Music] now return the clients now the next thing is to actually upload the file so we'll click upload function the plus function should take in a file file object that's io now we get the of clients okay http clients so uploading a file to the google photos api is in two parts according to the documentation right here so first of all we need to upload a raw byte to google server this doesn't result in any media item being created in the user's google photo account instead it returns an upload token which identifies as the user as the updated bytes and then second we now use the upload token to create the media in the user's google photo account and we can choose whether to put in in an album or not so yeah let's do that without your results cost out rates token results let's call it token results so here we're going to be using the authenticated claim that we got from the google google api's authentication package so it's going to be a post request i said here so it's going to be a post request to this to this particular url post requests with some headers basically we need these three editors right here the content type the main type and the upload protocol so we are going to assume that the main type is image search png and also it says something about the authorization data also but we won't be needing this because the uh the http client is already authenticated so it has the um it has what we need already which is the um the bearer token so we'll be doing that the next thing is to actually send the media binary in the body of the request body file dots with bytes i think so now after we send these requests we are expecting to get like friends expecting the body to be talking so this token results is what we are going to use now in our next request which is going to be to create the media item so creating the media item find those posts also right it's the post to this url i have to post this url with with the content type area as application application slash json content type and then the body so they say the body you should specify a list of new media items basically we only we're only uploading one media item right now so um just an encode new media items item we need we only online which is this the upload token is basically the token results from the previous requests the file name let's just call it photos upload floater photos upload and the item description you can give it any items description you like i won't be bothering myself adding that right now and yeah you can just print the results so we are hoping that this particular code this particular block of code should be able to upload to google photos and now we have to go to the home screen to actually make the call to action button do what we need to do so the peak the pick and upload file we need to use the file picker first pick our results results awaits filipino.platform.speak file the results is now the service dots upload file so now if we click on our button hopefully everything is going to work so click uh select an image oh as soon as i currently get overloaded okay um i think i have to make the type file samples image reload okay now we have our images here so you can select um guess the waterfall nothing seems to be happening we should add a loading shutter loading the kit over there okay so we have something loading now so i got an error and i tried to upload just now apparently i did token results sort of talking with the result of body so now i'll be rectifying that i'll be trying so now we have everything we have we have the photo uploaded and as you can see we have the results here in the console and if i this is the product url if i click on this it should show the photo uploaded so yes if you go to if i go to my google photos now i'm going to see this for today right there yeah thank you for watching please like and subscribe thank you bye [Music] you

Channel: JideGuru

Views: 3,961

Keywords: flutter, flutter tutorial, googleapis, flutter google photos, flutter google apis

Id: zQ2JUB9rno4

Length: 20min 33sec (1233 seconds)

Published: Wed Feb 09 2022