Pick Multiple Images and Videos with This Xamarin.Forms Library

in an earlier video i've shown you xamarin essentials and use the media picker to pick one image but now i came across a plugin that allows you to pick multiple images in one go on ios and android and also save images to the photo gallery with just one line of code how we can do all that magic let's go check it out in this video [Music] let's have a quick look at the thing that we're going to implement in this video you can see already the media gallery plug-in sample i have two buttons pick images and save an image so if you do pick images right now you can see i can select up to three items which is really cool you can see it here at the top and whenever we do that i can select one two three and then you know it blacks out you can't do anything more until i unselect one and select another one but you know if i click another one then you cannot do anything else and whenever i do we can see the metadata of the file we can actually get the stream of the file and do whatever we want with the bits that we get from it so that's really cool and the other way around saving an image so it doesn't have any visual feedback but it's taking a screenshot of this actual image and whenever we go here into the gallery you can see that a white square was added well actually you can't see it but believe me see it's there so we took a screenshot off the screen with essentials and then put that on the photo gallery without any problems just one or two lines of code let's go see how to implement this in your own application before we are going to look at the actual code let's just have a look at the github repository so this person has created this plugin um let's see if we can find out what their name is dima dima thank you so much for putting this together it is a really good thing he's from russia it seems so very cool if you like this repository of course always consider maybe sponsoring them on github if that's a possibility or you know contributing back to their code a little bit that is how open source stays sustainable um so if we go look at the xamarin.media gallery then you know there's a couple of things here it's supported by android on ios with a minimum version of 5 for android and 11 for ios i will get back to that in a little bit and here is by the way a important note so at the time of this plugin um the media plug-in by james montemagno is no longer supported i'm not sure if that's entirely true i think he's looking for someone to follow up on him to actually maintain that library so if that's something that you have ambitions to do then reach out to james i'm sure he will be happy to talk to you and examine essentials i think the team is busy with dot net maui that should not be you know a excuse to not maintain essentials anymore um but hopefully there will be something but yeah i'm not sure if something like this will be added before.net maui is here but you know hopefully this functionality will come into you know either examine essentials or dotnet maui or whatever it's going to be so that you know you don't need that extra plugin but for now we have this extra plugin so let's use it so get started i'm going to show you all of this we need to add some init lines some things for the permissions i will walk you through it no problem here we can see a little bit of the sample code that we're going to use too but the most important thing is down here actually so platform differences on android when you're saving media files the date and time are appended to the file name so that's something that you might want to know and when using pick a sync setting the selection limit parameter just sets multiple pick allow now to be honest i didn't test it for android yet maybe i should do that before publishing this video but i think what this says is if you look here you can set pick async and you can set here one so only one is allowed or two or three or five but i think setting this on android setting it to one will just allow you to pick a single one and setting it to anything more than one will just allow you to pick multiple but i don't think it actually limits you in the amount of files that you can pick so that is something you know um if you for each hear through the results that is something that you have to force then yourself whenever the user has picked um files so that's something that is good to know now here for ios also multi-picking is supported from ios version 14. that up so that is pretty recent um on older versions the plugin will prompt the user to select a single file so if you're using ios 14 and up you can have actual multiple files and the the the pic thing that we just looked at here with the pic async it actually does that we'll see that in the sample so if you select three you can only select three which is really cool but on older versions that setting does nothing so it will just allow you to pick a single file um so then you just default basically to the previous essentials functionality if you will um but so now that's that's good stuff to note because these are all paths that you need to consider when implementing this also name without extension property and ios version before 14 so before ios 14 returns a null value if the permission to access photos was not granted so if the user has not set allow to access my photos then it will return a no value so again something that is good to know now here we have some screenshots from dima he has provided that to see how it looks but let's just dive into visual studio for mac and let's see how to actually implement this on your own project so here we are in visual studio 2019 you can see it running on the left i've whipped up a file new xamarin forms application on the left you can see the example page of the page that you can see on the right in the ios simulator now as always you know let's start by updating that title and like i've mentioned this plugin is supported by ios and android and of course you know everything that you see here you can also do with visual studio on windows um so let's set this to media gallery plug-in sample and save that and with hot reload it will automatically update my running app in the simulator but also on a physical device so that is cool now the thing that we need to do first we need to install that plugin so let's go over to our solution explorer right click on the actual solution and do manage nuget packages and then i'm going to search for xamarin dot media gallery and that should pop up right here version 1 0 0 at the time of recording i'm going to check that and it actually has a dependency on xamarin essentials so behind the scenes it uses xamarin essential for a little bit so that is nice to see that will make the transition to bringing this to essentials much easier let's click that add package and we're going to add this to our shared and also to our android and ios project because the way this probably works is you know you have to install that little shared code which is probably an interface or something and then through the dependency servers or at least some platform-specific code you have to do some code on ios and on android if you want to know more about that the video is popping up on your screen right now to know more about the dependency service and how to you know make a little functionality like this maybe for yourself in your own project now while i was talking this package is almost installed it's adding three packages here successfully added there we go and whenever we do we can now access that media plugin so we need to initialize it a little bit first let's do it first for android and we're going to go to our android project right here and into the main activity and then we have a bunch of code here already um and you can see essentials comes in the box with a file new exam informs application these days so examine essentials is already here exam reforms are being initialized of course and here on top i don't think the order really matters here but here we can now add the native media dot platform dot init there we go and then we have to specify all the things that are similar to the other init line so this this is going to be the activity and this is going to be the saved instance state there we go this is just to pass down the activity and then whatnot so that it can do its work properly and also another thing that you want to do is handle the runtime permissions so for essentials it's done this way on the on request permissions result for this media gallery it's a little bit different so we need to actually override the on activity result activity result there we go so we're gonna do that one and before we go to the base one we want to add a little if native media dot platform dot check can process results so it checks if it actually can process this result for the activity this this event is something that is called by the android os to be honest i'm not entirely sure cold when an activity you launched exits giving you the request code you started with with the result code it returned and additional data from it so this is kind of like when you go back to this activity and it's going to see if it can do something with the result that is provided with the data here in these parameters so it's going to check if it can actually handle this we have to pass in the request code the result code so basically all the things that you can see here at the top the intent is going to call the data and then do this oh this is actually not the request code this is the result code there we go result code they look very similar and whenever the native media plugin can handle it so this has something to do again with the runtime permissions then it's going to say [Music] nativemedia.platform.on activityresult and we again pass in all these same things so i can just copy this one right here pass in all these parameters and then it's going to handle that for us now that is one part of what we want to do then the last thing we need to do on android is we need to go to our properties and android manifest and whenever you start some doing something with files you need that external storage thing so you need to do the right external storage here and save that and now we've got everything up and running for android so that's cool now of course kind of the same thing for ios and we do that in the ios project of course and then we go to the info p list and we of course need to provide those descriptions um with you know whenever you access the photos or any other sensors or privacy sensitive data you for ios in the info plus provide a little description that is shown to the user in a dialog box like hey do you want to give this user permission or this app permission and then you can as a developer you can enter the description which should be useful information for the user to convince them that it's okay to in this case allow access to the photos right so it's a little pro tip right here you can paste in the actual keys of the ios so the info plus file is just example file and you can just paste in the keys here so this is ns photo library add user's description and it will translate that automatically to the one in the ui here um so please let me use the photos photos without the typo come on yes photos there we go and the other one i think one is kind of the legacy one so here we have the add another one there we go ns photo library usage description um so i think one is the legacy one like pre ios 14 and the other one is ios 14 and up so be sure to include include them both so that you are always on the safe side please let me use the photos can be the same thing doesn't really matter so there we go that's all we need to do for the permissions bit on ios uh then we also need to do some initialization here um in the app delegate and well actually i'm checking my notes right here and we don't need to do any initialization code for ios so that is pretty cool yay we can just start implementing this thing finally so let's do the pick images first and what we're going to do is i'm going to add a little button here that has the text pick images and images images so emphasis on the images because with essentials you can only do one and that's the thing that we're going to see here okay could not create this handler that's fine then i'll do it or let's check if it actually didn't create it secretly for us oh i lost a stack layout here there we go save that and here we go a button pick images let's see if we actually got the event handler we did not okay that's fine i can create it myself private void on pick images clicked object sender what is it event args args there we go there we go and now i should be able to paste this in here clicked boom okay so now what we want to do is actually implement the code to pick our images so to do that let's see what is needed we are going to do the media gallery there we go and i need to import the usings here so i'm going to let intellisense do that using native media you can of course add that to yourself here at the top but you can also let intellisense solve that mediagallery.pick async there we go and here we can set that selection limit by default it's set to one so you know but well let's start with one let's see what it does and then we can set the types so this has media file type there we go and you can set it to images or videos and you can do both like this by doing the media file type video so now you can do both and if you do only one so if i leave out the the image one then you can do only videos and if you do only images then you can do only images but now i want to do both so this is fine and this will return a media pick result so we need to catch these result for results is this and we need to await this because it's async and then we want to async this one as well so there we go now we can get the results from here and we want to check if results dot files not is no well actually if it is null and we want to maybe you know maybe this can be null so let's do it like this then we want to say um return because then nothing happens right so [Music] probably the user cancel or something or something else happens so we're not going to go through this but whenever they do we can go to the for each and we can save our file it's not actually a file is it it's a it's a it's a media media i don't know let's do that in results dot files there we go we're going to loop through all the files in here um so i don't think you know files is the most important one what else do we have yeah files is the only thing that's useful in the results so we're going to loop through it and i'm going to get the file name from it so file name is file dot oops file uh sorry media i call it media dot and here you see all the things that we can use right so we can get the content type we can get the extension the name without extension the type i don't know what the type is and we can get the open read async so you can get all the bits from the actual media file right so that you can copy it or upload it or do whatever you want with it so that is pretty cool now i'm going to go get the file name so the name without extension there we go get the actual extension and it's then media dot extension there we go and lastly get the content type so far content type is media dot content type there we go now let's just pop this into a display alert so the title is going to be our file name and furthermore i'm going to use this string interpolation and the last is the button is going to be an okay so the string interpolation let's say extension is extension there we go and comma content type is content type there we go so save that and now whenever we pick one or more files uh it will show us a dialog with all the details so let's quickly stop and start running this application again it should come back up momentarily and then whenever we press our button to click to pick the images the media files we should see this up and running so here the ios simulator is coming back up again our application is showing and i'm going to click the pick images and there we go we can see the images here these two white ones they seem weird i realize that now but these are actually images that i took before you'll see that in a little bit little spoiler alert but whenever i click here this um images these flowers then you can see the file name is image0111 the extension is jpeg and the content type is then also jpeg so this i have the pick async and i set the pick limit to one so it just allows me to pick one file and it automatically goes through here but now let me actually stop this and whenever i set this to well let's do three and i run this again then now you will see that this picker because i'm running on ios 14.5 right um you can see that this allows me to pick images and it allows me to it already says here at the top select up to three items so that is something that i find really cool so i can say one well maybe this is waterfall and maybe these leaves right here and then you can see the entire ui blanks out right you can see that i cannot pick any other images than these unless i you know click another one that is already selected it will deselect that one and it allows me to select another one and then i can say add and it will go through the flow so we should get three dialogues right here image zero one one one we got that one uh zero four zero zero zero four we got that one and another one zero zero zero one so that's really cool we got the three images um like i said you can do all the other things you can access the stream the file stream get all the bytes out there and you can do whatever you want with that but the old the other cool thing that you can also do is actually save images to the kind of image rule or gallery or whatever you want to call it which is useful whenever you know in essentials you also have the screenshot api i have a video on that so go check that out it's in the video description down below or popping on your screen right now or you know i have some videos on creating barcodes and maybe you want to save that barcode to the user's gallery now with this plugin you can do exactly that so let's see how i'm actually going to go back to the example file and copy this button right here and now i'm going to say save image and i'm going to say on save image there we go can it create it right now nope again doesn't do it so i'll create it myself no problem on save image click let's just copy well let's copy this one we don't need the rest of the code okay there we go indentation on save image click there we go and now we're going to implement the save image click so what i want to do first like i said a good example is the essential screenshot one so let's just um take that for an example here and i'm going to get that screenshot for screenshot is screenshot i think let's see if we can get the using xamarin essentials in here there we go so what this does again in telesense it will add the xamarin essentials here at the top new screenshot dot capture async so let's do that and we need to make this a weight then and that's it i don't think it needs any parameters so it's just going to capture our full screen with that screenshot let's see if we can save it so we're going to say await what was it media gallery dot save async see so here we also have a save method and we can say what we want to save here so first we need to specify the typo in this case of course it's going to be an image because we're actually saving an image here and then we want to specify the file path which is you know basically whenever you do it at least on ios you can just specify the file name and something that you really want to note here while trying this so again a pro tip right here you want to specify the file name with the extension and it will automatically figure out the mime type and save it as an actual jpeg or png i don't know what the other formats is that are supported but i tried these two and that worked so you can save like my screenshot dot png and it will save it as a png so and of course um well why doesn't i well i need to specify the bytes right that's that's something i forgot to do okay so this is interesting um i actually you know talked over this um so here you have a couple of overrides that you can do which is cool so you can say media file type is image and then the file path so that's not the file name but the file path and you can point it to a file path and take that path from you know your local storage and put that in the gallery so that's one scenario that you could do also the second one that we're going to use right here is our type so again an image but we also have the byte array so you can take actual bytes and put that stream into into your photo gallery so then you're saving it like from a memory buffer or whatever and then you have to specify the file name so that's what i'm doing here um and then well this is kind of the same overload so not the byte array but here you have the actual stream so you can take either a byte array or a stream so that's both of the things that you can do so actually let's go back with this one and then i can say screenshot dot open greet async also you can do that here to get the actual stream and we need to await that as well and now it's going to save this actual stream to our gallery so let's save all the things here stop and restart our application and while that is doing it should come back up pretty soon there we go now we have an extra button with save image which is first going to take a screenshot and then save that to the gallery now i didn't do any visual feedback so we're just going to have to believe that it works which we can check with the pick images so with the pick images you see now three white things here and whenever i select it you can see it adds and it's called my screenshot it has a png and it's got the image png thing right here so let's actually check if it's in the gallery so we're going to swipe here for the home get to our gallery app right here and it's not so that's interesting do we have albums is it somewhere in here oh here we go albums oh so it's probably these white ones right here so it didn't see them but they are actually here um so here we go i think this is the last one see and i got the other ones here to prove it to you while preparing this demo so you can see there's a couple of screenshots here i saved them all to the gallery and they're all here no worries that is how you can use this media gallery plugin to actually select more than one file or save images to the photo gallery as well now ideally this is something that you would want to see right baked into essentials or dotnet maui or whatever you want to use but something that is inside the box i think you know dima has already mentioned that too but you know he decided to go this route for now and i know he's in touch with the team to actually maybe um contribute this to the actual code base so that would be really cool but for now here is how to use this plugin and that's really cool again dima thank you so much for doing this i love pointing out these small libraries that are out there and help you solve this little paper cut problem so if you know any any other libraries that are out there that i have not spoken about yet please let me know in the comments because i love seeing them other than that thank you for watching my video please click that little like button leave a little comment that's always nice to subscribe to my channel if you haven't done that yet and for anything else i'll be seeing you for my next video keep coding you

Channel: Gerald Versluis

Views: 4,194

Keywords: xamarin forms, xamarin forms 5, xamarin forms app, xamarin forms 101, xamarin forms tutorial, xamarin tutorial, xamarin forms tutorial for beginners, xamarin forms tutorial for beginners step by step, Xamarin.Forms, xamarin forms media picker, media picker xamarin forms, xamarin essentials media picker, xamarin pick images, Xamarin Forms Pick multiple images, Xamarin Forms Save to gallery, xamarin tutorial for beginners, Xamarin Forms MediaGallery, MediaGallery Plugin

Id: 8JvgnlHVyrI

Length: 26min 0sec (1560 seconds)

Published: Thu May 06 2021