Sorry, sorry, I was just picking some
files. Speaking of which, if you want to know how to pick files
in your .NET MAUI application, stick around for this video because
I'm going to show you how to do it. There are lots of scenarios that you
can think of where you want to let your user pick a file from their
device and then use that inside of your own .NET MAUI application. Maybe
you're creating some kind of PDF reader and you want them to pick a file and
you're going to show that in your PDF viewer. Maybe you're creating some
kind of media app and you want to let them pick sound
files or video files from their device and show them that. So how cool would
it be if .NET MAUI had something on board which is called,
say, FilePicker? That would show a little dialogue
which fits right into the platform that you're running the app on and it
will show a little dialog and that allows your user to pick one file or
multiple files and you can choose like if they can only pick images or are
you getting the hint yet? This is exactly what's built into .NET MAUI and what I'm
going to show you in this video. If you've been around long
enough and also worked with Xamarin Xamarin.Essentials, then this could
look very familiar because this is the exact same file picker that has been
implemented in Xamarin.Essentials. But here for .NET MAUI. Now it's
built into .NET MAUI itself. So no need for another library that
you need to install, it's just available for you in .NET MAUI. Let's go check out
how to implement it. Here in Visual Studio 2022, I created
a File, New application. It's just the default
template, the waving .NET bot. You probably know it by now and I don't really need
to do anything else. We don't need to install some other package
like Xamarin.Essentials because it's now built into .NET MAUI. And
I checked the documentation. We also don't need any special
permissions for this. So for Android, I was kind of worried that you need
the external storage permission for this to actually read files from the external
storage. Maybe if you still run into issues that you cannot pick files from
the external storage, then you might still want to add that, but only if
you really have to because you don't want to add too many permissions to do
that. Go to your Solution Explorer, under the Platforms, Android, Resources
folder, find your AndroidManifest.xml, and inside of that just add this little read external storage
permission and you should be all good to go. But we don't really technically
need it for the basic functionality here. So let's start with our main
page XAML. And for this image of the waving .NET bot, I'm going
to add a name attribute here and I'm going to just
name that myImage and now we can reference this
from our code behind and actually replace this image with
something that the user has picked. Now this is of course a very simple example
that I'm going to show you here but this can be anything you want.
Whenever you get the data from the file you can process that any way that you
want. I'm just going to show it inside of this image for now. So
let's go to our code behind the MainPage.xaml.cs and I'm going to
replace this OnCounterClicked code with
something that is going to be our file picker. So I'm
just going to start typing here FilePicker and because I have the
implicit using enabled it's going to automatically know this is
here. But if you don't have that then make sure to add using
Microsoft.Maui.Storage here at the top. So if I would
do that you would have to do using Microsoft.Maui. Storage and that will be the exact
same thing right? So then it knows where to actually find it. So
file picker and then we can see 3 major APIs
here. So file picker Default which is a property on
the file picker. It's a static thing actually which
just gives us the default implementation of this file picker.
Now all the Essentials APIs including the file picker are now made available
through dependency injection as well. So you can register it in your
dependency injection container and it can be injected inside of this
page and that will make for a little bit cleaner code. Of course
I'm just going to skip all that and go for the simple solution here but it should work the exact same. If you
want to know how to do it with dependency injection let me know
down in the comments and I'll be sure to make a video for that. So file picker
and then we have PickMultipleAsync and PickAsync.
So that's for one file or multiple files. Now let's start
with the one file PickAsync and if we inspect what that all does
you can see that it returns a FileResult or well it may
be, it might also be null so we need to check for that
and we can specify optionally the PickOptions with which we can
specify a couple of options that we want to use on our picker. So let's do
that. Let's make a variable var result = await. Then we need to make this async and then we
can specify the options here. So let's see what the
options are. New PickOptions and I think this has a couple of
properties so let's actually have a look at those and we see the
file types with which you can specify like the file types that you
want to allow the user to pick basically which
can be images, which can be videos. I think it has a
couple of built-in types but you can also specify your own custom
types. I'll show you that in a little bit as well. And we can set the
picker title which is just a little string title that you can set.
Please note that it doesn't always show on every platform and not every
platform will show it the same way or not at all. So don't make sure
that you don't depend on this to give your users any
important information. I'm just going to set it for now. The picker
title, pick image please. Sounds like something good.
And the file types we have then which is of type file,
picker file type. There we go. And you can set images,
you can set it specific to JPEG PDF, PNG or you can set it to videos
and this is just the build in ones and like I said, you can do
the custom ones as well. I'll get to that near the end of the
video. So let's just do the images right now. And this
is basically all we need to do to actually let the user pick an
image. So we have this in our results. So we need to check if
result is null because that can happen. We're
going to return typically you probably want to do something else
but now I'm just going to return, I'm not going to process any further
but else I'm just going to get the stream is result because here we can get a couple of things from the
file that the user picked, we can get the file name, we can do
OpenReadAsync. So that's the thing that I want to get
the stream with the contents of this file we can get the content type,
we can get the full path so you can get all these kinds of
properties from our files as well. I'm going to do this OpenReadAsync
and I need to do the await here again. So that it's
actually the thing that we need. And now I can say
myImage.Source = ImageSource.FromStream. We can just create an image from a
stream and I can put the stream in here. And now whenever we do this,
whenever I run this on Windows, let me do that while I'm talking here,
it's going to deploy as a Windows application and it's actually going to
show us the exact same template that we're
used to. But now whenever I click on the button it will show me a pick file
dialog. I'm restricted to just picking one
file and whenever I pick that file it's going to open
that in the stream, it's going to give that stream to the image source
and then it's going to show that image instead of our waving .NET bot. Here we
go. And whenever I click the button here you can see
that. Now this is our open file dialog here's a little
surprise.jpg. But whenever I go to somewhere else I
don't know if I go to my downloads. Is there something there?
There's nothing here. I don't have a lot of files in here. So here's another
repository that is here. You can see that not even the files
are shown, right? There are files under here, but it's just not shown unless
it's an image file. So let's go back to my pictures. And I have this
surprise.jpg. And whenever I select that and do open, it's going
to load this image here. And it's going to ask you to please
subscribe to my channel, which is a good reminder to do so if you haven't
done so already. So that's how you can pick this one
file. Now you might want to also pick multiple files, right?
Actually, before I show you that, I also deployed this to Android. We're
not going to sit through that together. So you can see it here running on
Android as well. And whenever I do it here, it's going to open the app
that is used for picking files on Android. If you
have multiple apps that can do it, it will first show you that little
dialogue with, hey, which app do you want to use for this? You can see that
I have the same image here in my downloads. I can just pick that
and it will do the same thing. And it will load it
here inside of this image as well without any code changes just deployed
on Android. And it will work the exact same way. How cool is that? So back
here, I'm going to do the rest on Windows.
You'll now believe me that it works on Android and iOS as well, right? So
let's go back to our MainPage.xaml. And I'm going to
actually add a little new button here. I'm just going to copy
and paste this. Let's just make this click me Pick Image so that you know it's just one. And I
need to pick a different name here. Pick Images. This is going to be Pick Image so that
whenever you go to the reference code, which is linked in the video
description, that you know how this all ties together. And here we're going to say
Pick Images. Right? So I'm going to do that now.
And I need a new event handler here. So we got all of this set up.
Okay, so now I should have a new event handler. And now let's see
how we can do multiples. So actually, let me just type it all for you. Again, results. So now
we're going to add the S, which is going to be await File Picker.PickMultipleAsync. So does that give us any new options?
I don't think so. The pick options are still the same. So I'm going to
not bother with that. You can still restrict it to whatever,
to images, to videos, whatever you want. And here you can
see that we return now an IEnumerable of FileResults. So we're
going to have multiples back, right? So you need to account for that
as well. So we're going to have that. We have this async okay, that's
fine. And now whenever we do that, we don't need to check for
null because it can't be null. It's an IEnumerable. So it can
have 0 results, 0 items in there or multiple. And we can just
do for each var result in results. And what we're going to do now is just
say DisplayAlert and it's going to be string title you
picked. And then let's put some metadata in
here. So we're just going to say result file name, right? Okay. So now if we're going to pick
multiple, we're going to see this display alert
for a couple of times with each file name, right? So let's see if that
actually works. Run this on Windows again. So I now have two buttons. One will
still have the old functionality that we've just seen. The new functionality
will now loop through all the multiple files that we picked and show
a dialog for each one that we've actually picked in
here. So if you're creating that media player and you
want to use it to pick multiple sound files in one go, this is how you can do it.
And you can loop through all of them and do the processing that
you want. So if we do pick images, I now can pick multiple. So let's go to my pictures and you can
see I can do multiple. I didn't show you this, but this
wasn't possible just yet. When you did the PickAsync, you could
only pick one. And now I can do multiple and I can do open. And
not so surprising anymore. jpg. And also surpris.jpg. Right. So
you can see how I can pick multiples. So the last
thing I promised you is to actually show something with the
custom file types. Actually I'm going to paste in
some code here from off screen. So don't be scared. I'm going
to paste it in here and it's in comments right now. So let
me get that out of the way. So here you can set the
custom file type and you can set the file picker file type.
You can create a new instance of that and you have to provide that
with a dictionary of device, platform and the IEnumerable string.
So that's kind of interesting. It's a little bit more deep dive, a little
bit more advanced to go look at the documentation on how to do this. And
you can set device, platform iOS. So this is like the
thing for iOS because this is a file picker, it's used for
all the platforms. And now we have to specify for each platform that we
want to support what it's going to look for. And like on Windows,
that's probably the most known use case, maybe, at least for
me, you can just specify the extension, right? It's just going
to be PDF because we're going to select PDF files here. But for iOS you don't
select the extension. You select kind of like the more metadata
description for this and you're going to have to specify
the.com edible PDF and that's how you restrict the file picker for PDFs.
Same thing for Android, you have to specify the MIME type and
you can specify multiples in here because we're doing
the IEnumerable. So you can also do PDF and I don't know XPS, is that still a
thing? And TXT all kinds of files. You can make
multiples here and it will allow for that range. But you can also
restrict it to just one and specify that for all the different platforms. Now
this custom file type we can then specify here in our options. So I
can say here new PickerOptions. And inside of that FiieTypes thing I can now say
is custom file type and that will accept that. And
now I can only select PDF files. So if I should run this, I
should probably fix this because UWP is not a thing anymore WinUI.
And if I run this on Windows, then I would expect to now be
able to select PDF file. So let's see if that
dialogue actually reflects that. So that I proved to you so that
I'm a trustworthy person and I'm not
actually lying to you here on code. And that whenever you get to try this,
it doesn't work and you have to leave angry comments. Please don't do
that. My channel is a loving channel. I love every one of you. So
here we are. I did this in the pick multiple ones.
So let's just go here. And here you can see now here in the
bottom right corner you can see it says *.pdf. So it
only allows you to select PDF files. And
you can see actually here in this picture folder, the images are gone because
they're not PDFs and it's not even going to be shown to
you. And that's how you can use the file picker in .NET MAUI.
There is not much more to say here. That is how you can pick files
in your .NET MAUI application. Of course, how you're going to process
this, how you're going to exactly show this to your user, that's totally up
to you depending on what type of application you are
making. But this should get you started. Now if you're going to use the custom
file types, that is a little bit more advanced. So make sure that you
look up the documentation or of course let me know down in the comments and
I'll be on the lookout for your questions and comments and
respond to them when I can. There's one other thing. On iOS you
can actually pick files from iCloud, but you have to do some extra for that
as well. So make sure to check out the documentation. I'll put
the link down in the video description. Please like this video if you've
actually liked it. Thank you so much. That will help it spread to more people.
Discover the joy of .NET MAUI. Subscribe to my channel if you haven't
done so already. And maybe you want to check out this playlist right here
with more .NET MAUI content. Check out this video, which is recommended
especially for you. And check out this button to see if you're actually subscribed.
See you for the next one.
