Upload File In .NET MAUI Blazor Application (Login Flow Part - 3)

[Music] [Music] guys welcome to my channel in this video i am going to show you demo about uploading user profile picture in dotnet mavi blazer application so here i already created a demo about a complete login flow in dotnet mavi blazer application if you not seeing then just click on suggestion link to see that and here on registration page i'm just going to add now uploading user profile picture mechanism while registering user so let's go through it here i already created an api so in a register user i added one property called user router so let me show you first web api so here in register user i am accepting uh user author in form of base64 and after that i am just setting some unique file name and then i'm uploading this file into image folder so here in a web api project i created the images folder so in that whatever the user upload the profile picture that going to add here while uh registering user and that after like one this upload file going to return now upload folder part and that i am just setting in this variable outer variable and then i just add in user to be created dot user router is equal to uh whatever the part written from a upload file that i am setting here and after that i am calling user manager.creatorsync so this will create the user uh with all the detail that came from api call api request so let's uh integrate that now in dotted by a blazer application okay so here in registration.razer component i'm just going to add one image and in that i will just set uh some default default image so first let me add default image in this root folder and i'm just going to add new folder called images and in that let me add one default picture so this i'm just going to display so see let me create a one variable and in that i am just going to set this part so later on when we upload any picture that we can replace in this user of that variable now here on the click of image i'm going to uh display uh action like take photo or add photo from gallery so let me add one method so here i am using uh dotnet marquee excellency but you can use any uh pop-up page of like a bootstrap if you want for temporary i am using this so i am adding here to option take photo or add photo so if the response is equal to take photo then i am just going to take photo from camera otherwise i will just check for like if add photo then we will add photo from the gallery now this display action sheet i am just going to call on click of this image okay now let me run the application so we will see like this on the click of image if displaying accents it or not okay so here on the click of user uh picture now it's uh displaying two options take photo and add photo so it's working now let me add permission for like when we run application in android device or ios so we needed some permission unlike camera permission or reading from internal storage or external storage so for that here in android first let me add permission for android so here in platform uh in android manifest you can set here permission so let me add permission so for android you can set permission in android manifest.xml and in that just add camera and read external right external storage now same permission other permission also we need to add in uh ios info.plist file so let me just open that and here i am just going to add some permission like a camera uses description and here i'm just going to add some description to me then other permission so you can add permission like this for ios in info.pls file like if you know that then it's just going to crash the application okay so this is done for ios now for windows here in windows package dot manifest file here just click on view code and here in capability uh just add these two permission like webcam and microphone permission so after that it going to capture the image so now the permission setup is done for ios android and windows format now here on registration please let me add code related to first add photo so here i'm just going to use a media picker default dot pic photo are seen so it's just going to add photo from gallery and after that let's check if the photo is not null then i'm just going to let me set new file now from this member stream i'm just going to fetch by now let me create another property here so image base 64 data so this property i'm just going to use for uploading a picture when i call registration api so that i'm just going to use so i am just going to use convert.2b64 string and in that i will pass this image bytes now for display like we need to display image like whatever the user selected picture that i am just going to display in this user of that variable so let me just set now whatever the picture is uploaded that i am just going to set in user after so for that i am first going to set like this data colony png and we are passing with 64 format so now imagebase64 data i'm just going to set in this user router and after that i will just call this dot state has changed so it's just going to replace whatever the user profile picture is uploaded that are going to replace in user router so here uh what i did is like this big photo async is going to pick photo from gallery and after that i'm just reading that stream and storing that in you cash directory of device and after that um also i am just getting that byte because i want to display that in this image tag as well as i am going to pass that base64 format in the api also so for that purpose i set it at bytes into b64 format now let me run the application okay so here on the click of add photo it's just uh going to open the folder so if we can select image so let me just select some image from this folder so if i select any image so it's just going to replace older one with new images like this okay now let me add a code related to take photos so right now i do i don't have any webcam in this window so i will show you in android device about take photo so let me first add code related to that okay so here i am going to check like if media picker is captured for capture supported then let me just copy this oil code here instead of the photosync i will call capture photosync and same other all logic will be the same so after capturing photo it is going to convert that image whatever the image that capture into byte and that we convert into base64 and we will set here in user hotel so let me run this uh application now in android and let's see that capture photo is supported or not so okay so here on a registration page on the click of this default picture it asking for take photo or add photo so on the click update photo it is going to ask now for a permission that devices require take photo or record video permission so after approving permission it just open the camera okay so after selecting image it's just going to replace that image here in default image format okay now let me add logic related to uh saving this image in our web api so let me add logic related this and let me show you also like it's going to support add photo also like if i click on add photo so it just going to open the browser like internal storage and you can select any image from that so here now i'm just going to save this image in our web api so for that we are calling here on submit button we are calling this register user so here so okay i don't need this condition because this never going to be this because by default image bit 64 data will be empty now here in registration model let me add another property for for passing data so let me just confirm in web apis which property we are using okay so that is user router so in this user router i'm just going to pass now base64 format data and that after that it's just going to going to call register user api now let me run the application so i'm just going to run in windows so it will run fast so right now here in images folder it's empty and after it's called register user so it's just going to save image in this images folder so let me now register user so right now in database there is a no register user so let me just register and here i'm just going to upload any picture and let me call register user api okay so here now it's displaying as a user registered so here in images uh it's uh image decided as a test.png and here on database this user is created and here user router part will be images slash test.png so when i access so it's just going to display this image from this part now let me see like white you may save as a test.png because i am setting here file name and same file name here i am passing so i think i didn't uh rerun the web api so because of that it's saved as a test.png now let me register another user again let me just change the profile picture so okay so now file name will be in this format okay now i can access this image from images folder okay so uploading images from registration is process is done now what i am going to do is like once the user is logged in then i am just going to display this user profile picture and basic user info on dashboard so that will be the index page of glazer application so here in index.laser component i will display image so let me implement that okay so here i'm displaying value like uh user basic detail dot name so that coming from like uh when user is logged in so that time from the token i'm just patching user id and the username so i'm just going to do like i will fetch a user router also from the token so for temporary purpose i did like that but you can just fetch user id from the or just patch a token and from the token you can get user basic detail like you just need to create one api that will return all the user basic detail from the token so you can do like this so for temporary purpose let me fetch here out user router so here in authenticate user api in a generate access token so i just added user router as one claim and in that i'm just like keep the from the user detail i'm just getting like a user router and that i'm saving in this user hotel key so let me just patch from that so here and here in user basic detail i am just going to set user out variable and in that i will just set value so before that i need to set page address also so here in app service i have added page address so let me just set this page address in this setting dot cs class so this page url i will use here in api also so i no need to set here now from starting that this url i will use like this and also here i need to set first base url then whatever the user router part is returned that i am just going to set okay so from this information i will save in the secure storage and after that like on the index component i'm just displaying here welcome uh user basic detail dot name so same way i will display here image also so let me just copy this image tag so yeah now let me run the application and let's see like after logging it's displaying user router or not okay so let me login here okay so here it's not displaying image so let me just uh display this user after part and let me rerun the application and let's see it's displaying user outer part or not okay so it's displaying user after part but here in blazer it's not displaying image so here i'm just going to check so this image also accessible but it's not displaying in blazer application so i'm just going to run on ssl so using https format i am just going to run this application so here in web api let me just set this app url in ssl format i need to set here in localhost format because ssl certificate is created for localhost environment so for that i did like this now let me run the application so right now this user of type uh part stored in preferences uh in a secure storage so first i need to do log out because right now it's going to pointing to that old ip address if you see here so it's pointing to old so let me just log out and login again so then it's going to okay so here inside thing i need to set this new address that i set in web api so let me just set here in setting and setting uh page url now let me run the application so now it's pointing to local house 7277 port okay so now it's displaying image and also this user after part so now it's pointing to this local host now let me again rerun and i'm just going to now log in using other user and let's see for that user it displaying user router or not okay so i'm just going to log out and okay so it's displaying user router for other user also so this local host here i set base url it's a local host so it's not going to run in android and ios for that i need to point to ip address to run in android and ios but if we point to ip address that time i cannot enable this https so in that case it's not going to display image but after hosting like if you host a website and it's going to run on https then it's going to display image okay so that's all for today i hope you like this video and thank you so much for watching

Channel: Programming With Pragnesh

Views: 3,180

Keywords: Upload File In .NET MAUI, Upload File In .NET MAUI Blazor App, Upload Image In .NET MAUI Blazor App, Upload Image In .NET MAUI

Id: faeegFUEaPU

Length: 32min 46sec (1966 seconds)

Published: Fri Sep 09 2022