.NET Maui Apps | How to use File Picker to select file to MAUI Mobile and Desktop application.

hi everybody welcome back again to netcode of  Channel it is a great pleasure to see you here   now this video we are going to talk about how  to select or pick file from your mobile phone   or desktop computer it could be an image it  could be audio we could be video we could be   anything that's our PDF so let's have a look  at it so what you have to do here is we have   to enable permissions whenever you're using  an Android in the Android manifest.xml file   so let's go to solution Explorer and did you do  that right before that you have to create a new   project so I'm going to create this project after  this I'm going to leave this work at a GitHub   so I'll put the link at the description so click  on it and you can have access to the source code so file new project thank you so let's build it and you  can see from here restoring   the get packages so let's wait for us to finish so let's set up a name that is for  an image you can put it beneath this   so let's make a copy of this and that's what we're  going to do after we upload or select the image we   want to display it over here so we want to set the  name of this so X name and now we can set it as so let's say image label let's save that now when we go to we have a  button here and you can see we have a click   event so let's go to the code behind file  and you're going to find it over there so   now we are in here so we want to clear this and now with this we're going to select  the file as soon as the button is being   clicked so how can we do that we can do that by  simply passing in a file picker so let's create   there's a response this records you then we  can say picker because we have it over here so   um but it is not just speaker rather it is  file picker so we check the five picker dot   pick async because I want to pick single  item then in here we need to pass a new   pick options and now with this  big options we can specify the title that you want to tell the user  so we can say pick a title and that is so   so please select you can  talk about selects and image okay so I will close that so the  response you're going to hold the   Picker but this is going to display the  image but what is the actual operation   that is what we need to let's have separate this  with comma then the next line we can talk about   the file type so file type is equal to and  now here we won't just have only file types so five picker types now here you see we're  gonna have a lot we have PNG jpg PDF images   okay so when you talk about images and  comprise of all the types the PNG jpg   um jpeg as well so let's select that okay if  you want to be specific we can just set up the   the specified one or if you want to check  for maybe two images then we can also set   it over there where this response okay  so let's set the image now here when we   come here you can see that you can have  response Dot and yeah you're gonna have we have an await here meaning  that here must be an awaits   so you can have the response  here so let's see from this file   and this must be async as well so from this file  let's see so response dot they can have file name   okay and aside from that you see we have full  path as well so you can make a check over here   now when you go to documentation for this file  picker we can also make a check here by using   this so you see we get the file and now we are  checking if the file name ends with this JPEG   and PNG although we are making a suggestions  to select any options for image but you want   to check it from here so maybe we can do  something like we can just grab only this   if you don't want to add or if you don't want  to get all type of images okay so this couple   of days and now you can now paste this here and  I can add pages here so let's put this on the   same line so that's what you are saying if the  file ends with JPG or PNG so if the file ends   with the peg we're not going to select that you  want only jpg and PNG then that's what we can do so then else we can just use something like  let's call for a weight sale dot current   dot display and let's and here we  can say let's put yeah error or alert then in your compass in invalid file selected  and we can just have a button of okay   but in case this file here accelerator what you  do what should we do now let's save this we are   going to run this on Windows after that we're  going to run this on the Android as well and   let's see if you're going to have this pop-up  once you select a file which is either jpeg   so let's see let's first take I have some images  here and the extensions uh jpg and we have   um the the same PNG and our PNG so now let's  set up this so jpeg so it means when we select   jpg PNG we won't have an exception here let's  save this and unless one on the windows and see so you have two images that is the.net but  now let's see if I click on this button and   my server says to you my files here and I'll  just have to go to my downloads and now images so with this the PNG so in case I select this  open this and actually I have to have an alert   as invalid file selected okay now in case you run  this on Android 2 you're gonna have the same thing   so let's have it as soon as we select the  correct format what are you going to do   then we are going to specify  stream so let's stream this   so this equals you and now you can  have an I wait and we say response Dot   open rate async so with this after that  let's set the image label so image label   dot source records you stream okay so  here instead of using this stream simply   like that we can use image stream so image  stream then we're gonna say dot dots from   stream so we have the image source  instead we're going to have Dot   Source dots they're gonna have from stream  then in here you pass in you point up to   this stream variable that we have created  okay but I know before you do that this   call a method so we have to do this all  right now let's see so let's run this again so let's click on the button to select an image  and now here we are second four we want to see   one of these images change so click on this so  now let's select so this is a PNG file and I want   to say jpg so that is a bookend so let's open  this and now you can see here has now changed   as soon as we click on this again we can have  access to the same file picker and two we can now   select an image as well so you can choose another  one then open and it's going to change that let's   build this in the Android NC so let's run this  in the Android emulator so I'm going to choose okay so it is ready now if I click on this  button it has to navigate to a file selector   so I can select an image here and unfortunately  we see I'm not having any image on them later   here but soon as it opens the um the file  here tells us that it's going to be able   to select that and I could say that's an  object reference not set because we could   not select any file and we can handle that  so by passing the method in try catch block   to handle that let's try that and see so  with the help of this we're going to cut   this and instead of having that error we're  going to do a try then let's paste this and   with the cards we're not going to do  anything yet so we're passing the exception and that is they're not going to do anything  so let's handle the exception from there   so save that and unless restart so now let's try again to see if that exception  is been held now let's see so if I go back nothing   happens oh so that is a way to handle a single far  but can you select multiple files yes of course so   to decide multiple files is a matter of setting  here to multiple async you can see that when we   got it there we'd have to select pick async but  here you're going to select pick multiple async   now as soon as we use this it means we have  a lot of files here in this image so we have   to Loop through this so you can do that by using  for each Loop so let's see so we can do for each then we're going to say VAR image  or is it yeah so let's say image   in response then here we can now have a message  here so let's see the image that we're going to   select we're gonna say if this image dot ends with  so if IMG then you're gonna have Dot let's see if   your number access to the properties of this now  um if response so it is if IMG here okay so with   this IMG when you click on dot you can see we  have the file name file path and Etc so let's   specify the file name so if this image has this  jpg and also if the IMG Dot response here has um   jpg then that's what you want to do so we want to  open read async and I can see from here we can't read response here so all that's what you're  going to do let's send this to image because   that is a current item that we have in the loop so  and here we're going to set this so this is going   to set as soon as we select more than one image  or two images the first I'm going to pop up I'm   going to be displayed then the next one I'm going  to just set up so that's what we can do after   running this you want to delay so let's say tax  dot delay and we can set this to 2000 two seconds let's put it as an await so it means as soon as I said the first  image it's going to wait for two seconds   that's going to set the other image as  well let's see so let's save this now   you know I'm not going to run on Android  because you're not having any image in   the emulator so let's stop this and now let's  use the windows to run it and see because for   that one we can select a multiple images  from there so now let's run on it and see all right so you see the app is not  ready now let's click on this button   so here is our image that we have and you  can see this is PNG and this PNG now you   have only two images here as jpg and jpg so  let's select these two images now as soon as   you open the first one I'm going to open for  two seconds that's kind of going to pop up   so I could say because of the task.delay we've  been able to delay the the showing of the image   so that's a way to select multiple images now  the next thing that we're going to do here is   maybe you can decide to grab this each of the  image Here and Now convert it to basic default   string or send it to the database or do a  lot of things that you want to do with it   kindly the file it is in the Stream and as you can  see from here there is no folder that where you   can have the file here it has been selected from  the device the file storage on the device so when   we get the full path let's see what the file is  currently so now here after I'm going to call this so as soon as it reads and set the source I want  to call this now this is an info and now what   do I want to do here I want to just display  the file path so I'm going to say image Dot   full path path so that is this let's grab  this only from here and I'll paste it here   and now with this for each you want to close that okay so we can just grab this L  statement and we can just paste it here then let's uncomment this   okay so instead of this image we're going to  use this response so paste it here paste it here and now here response and now with  these two we're gonna paste it there so so if responds then insert this multiple async  is going to be click async   and problem solved now so let's change this see  response okay now let's see so we have response   here and now this must have the file name so  let's grab this and now we paste it there dot   enter it receive that and now here let's restart  the application and now we see so yeah it's not   going to delay because you don't want any  delay here so you can just save it and let's   wait to see the pop-up here so click on the  button and you're going to select this image so as soon as I click on open   you can see I have the image path and that is  it okay so that is it for this video I believe   you guys enjoyed it now you know how to use the  file picker to get image from the device that's   a Windows or Android thank you so much and  maybe the next time we'll talk about how to   convert this image or how to send this image  into database and that's also going to help   you also as well thank you take care of yourself  and I'm going to catch you up in the next video

Channel: Netcode-Hub

Views: 1,187

Keywords: skip(), scaffolding, assign-role, mobile apps, maui app, mobile app, android, map key, google map api key, integrate map, desktop application, google map.api key, api key, context menu, How to use Font Awesome in NET MAUI Mobile and Desktop applications., icons, sqlite database, contact app, carousel in app, display data with listview, list view component, using list view, material designicons, google icons, google fonts, filepicker, fileuploader

Id: dlMevsXhvkQ

Length: 18min 10sec (1090 seconds)

Published: Thu Aug 17 2023