Use .NET MAUI FilePicker to Pick PDFs, Images, Videos and More!
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- With .NET MAUI you can use the FilePicker to pick files from your device filesystem on iOS, macOS, Android and Windows. In this video, I will show you how to use to the FilePicker to pick all types of files. This can not just be images, PDFs, but any type of file you want!
Learn how to pick multiple files at once, or limit it to just one, filter by extension and more, all in 15 minutes.
💝 Join this channel to get access to perks:
th-cam.com/channels/ral.html...
🛑 Don't forget to subscribe to my channel for more cool content: th-cam.com/users/GeraldVerslui...
🔗 Links
Sample code repo: github.com/jfversluis/MauiFil...
.NET MAUI Docs: docs.microsoft.com/dotnet/maui
⏱ Timestamps
0:00 Pick Files in .NET MAUI
0:12 What is File Picking?
1:18 Implement Single File Picker
8:34 Multiple Files Picker
11:32 Pick Custom File Types
14:14 Want To Learn More?
🎥 Video edited with Camtasia (ref): techsmith.z6rjha.net/AJoeD
🙋♂️ Also find my...
Blog: blog.verslu.is
Twitch: / jfversluis
All the rest: jfversluis.dev - วิทยาศาสตร์และเทคโนโลยี
What else you can do with .NET MAUI? The sky is the limit! Check out this playlist right here with videos about plugins from the community to make your life easier! th-cam.com/video/nCNh9G-Q688/w-d-xo.html
Gerald -- Just want to say all of your videos since day 1 on MAUI have be EXCEPTIONAL!!! They are all well articulated and are extremely helpful in adoption of the MAUI platform. Your personality with the humor and quirky editing styles added to the videos also make them very entertaining!!! -- your content is greatly Appreciated!!!
Don’t know how I missed this comment, so sorry. I’m glad I stumbled on it now because it made my day! Thank you 🥰
Very nice @Gerald keep it up its really appreciated. Thanks again for the video
Thank you, definitely will! 20k soon 🚀
Thanks for this introduction video. Can we tell the FilePicker dialog to point to the App data local Storage before the dialog shows.
Ha mate, thanks so much for doing this video and explaining everything so clearly, appreciated
You’re most welcome my friend!
Hi @jfversluis, is there a way to have a shared blazor component containing a FilePicker for Maui, but not for the Blazor Website? Now I think about it, this could mabey be done with the factory pattern?
Thanks for the tutorial!
You bet!
Thank you man for sharing this stuff
You’re very welcome!
Thank you for this Video! But it is possible that you can access a file without the FilePicker (filepath?) For example on a local NAS drive.
Thanks Gerald , please continue with this great videos .
Thanks, will do!
Cool, now I have a way for players to upload their own character profile pics 😊
thank you , you learn me a lot of things, thanks very mush
That is great! Thank you!
Your video so good for learning keep doing,
I have to ask you something, it's possible to show textfile of datas into combobox if its yes please tell me how to do that
It appears on MacCatalyst, 'await' is being ignored with the FilePicker. 'await' worked fine with the DisplayAlert dialog but if I put a debug.print statement right after the FilePicker, it prints the output message while the picker is still open. As a consequence, the result is always null. Anyone found a way around this?
Thanks for this amazing video! What option do we have to invoke the camera to capture a profile image for the user registration/ profile update page?
You'll want to use MediaPicker for that. This is for Xamarin, but should work the same for .NET MAUI: th-cam.com/video/AYfGxhEHiec/w-d-xo.html
Keep it up!!!, do something with a bluetooth connection! could be nice for IoT projects !
I'm trying to do this but with MAUI Blazor and razor pages. The main issue I'm running into is displaying an image the user has selected. I'm trying to assign the file path to the source of the image ("src" in this case), but it never successfully displays an image. I am using "CapturePhotoAsyc", and the documentation does say to use "OpenReadAsync" instead of "FullPath", but it doesn't show any examples of displaying pictures. Because I'm not using XAML, I'm not able to do it like in the video because I can't assign an ImageSource to an img tag. At this point, I need to somehow get a valid directory from the photo the user selects and I'm not sure how to do that using "OpenReadAsync" as the documentation suggests.
Very very useful, Thank you for the amazing content! can you cover drag and drop in MAUI ?
Great suggestion! Will look into it, thanks!
@@jfversluis Hey @Gerald, were you able to implement the drag and drop by any chance?
I try to use binding in the image using mvvm and not work
Superb👌
Thank you!
Thanks for that video - I realy enjoy watching your videos! Allthough - for some reason the code from the repo does not compile anymore (just want to mention to you ;-) In a new maui app project I can get the code sniplets to work, but the pics don't show up (tried on windows and android with VS2022 and vs2022Preview) Maybe you can look into this problem... ;-)
Again: thanks for your videos
Thank you sir
Thanks for watching!
Hello, I am trying for while to pick an image with my ios simulator. I am going through the docs and I can pick an image but when I write the stream to the source, nothing is happening. The old source remains, or no source is updated: FileResult photo = await MediaPicker.Default.PickPhotoAsync();
using Stream sourceStream = await photo.OpenReadAsync();
img_profilePic.Source = ImageSource.FromStream(() => sourceStream);
is my code wrong?
Can i let user pick an image from resources/images folder?
Please make a video to know how we can upload a file to onedrive using maui the old ways don't work
Thanks for all your videos! Is there any way to pick multiple images on iOs using FilePicker or MediaPicker?
For FilePicker you can use PickMultipleFilesAsync: learn.microsoft.com/dotnet/maui/platform-integration/storage/file-picker?view=net-maui-8.0&tabs=android#pick-multiple-files
For MediaPicker unfortunately not possible, you’ll have to use another plugin for that or write your own
Got it, thank you @@jfversluis
Hey Gerald, great video as always :). What if I want to open a pdf I already have stored locally without filepicker ?
Thanks! Then you probably want to use the Launcher: learn.microsoft.com/xamarin/essentials/launcher?tabs=ios
@@jfversluis Thanks worked like a charm!
If i launch this example for picking image on Android 7 i get this error : Android.Content.Res.Resources+NotFoundException: 'Resource ID #0x7f0d0003' .Why???
¡Gracias!
¡Mi gusta! (If I remember correctly 😅)
Or… de nada
Hi, I have implemented this and it's working fine on Android and Windows. However, on iOS, I am unable to pick images from the gallery. It only shows the file pick option. Is there any way I can access iPhone gallery images?
If i launch this example for picking image on Android 7 i get this error : Android.Content.Res.Resources+NotFoundException: 'Resource ID #0x7f0d0003' .Why???
This is what i was looking for. You save my time. Also do you know how convert image to grayscale in maui?
Perfect! Glad I was able to help! Probably look at Microsoft.MAUI.Graphics or SkiaSharp
@@jfversluis Thanks. will look into them
in windows when deployed with MSBuild is not working
Thanks for this amazing video. But how to use .net maui MediaPicker add method to select multiple images and CapturePhotosAsync to take multiple photos ? Can anyone help me please.
You probably want to have a look at the MediaGallery plugin, I think that can do it
Dear Gerald.
Excellent video, but I'm trying to open a type of file with a .key extension, in the options I put:
{ DevicePlatform.Android, new[] { "application/key" } }
But the dialog box that opens leaves all files disabled, even the .key file.
What am I doing wrong ?
According to this the mime type for a key file is application/pkcs8 pki-tutorial.readthedocs.io/en/latest/mime.html
@@jfversluis It was the same, all the files are disabled, but you gave me a way to continue trying to solve my problem.
Thank you very much for your time and response.
Greetings from Leon Gto México
@@ricardoalejandroescalantem8217 Just had a similar issue with audio files. You may want to check out android.googlesource.com/platform/external/mime-support/+/9817b71a54a2ee8b691c1dfa937c0f9b16b3473c/mime.types
ciao
Gerald.
I am using the FilePicker. It works fine on Android. I don't understand something on IPad. When I open the FilePicker it visualize the" File" picker (as when I open the "File" app). But I am not able to select photos. Is possible to select photos from the "Photo" app?
You will need to use the MediaPicker for that
@@jfversluis thank, I try!
Hello, Is it possible to select the "All Type Files"?
I would think that happens if you don’t specify any file types
I can't seem to get a custom file extension to display. It appears that when i create the sqlite3 database it's not adding the extension.
Make sure to add the right mime-type!
@@jfversluis Finally got it figured out.
THANK YOU MY BROTHER FROM ANOTHER COUNTRY AND ANOTHER FAMILY!!!
You bet!
can you please make a video on capture images using camera on windows mine is not working thanks
Check my latest video, that might help! th-cam.com/video/nlZSLPf22vI/w-d-xo.html
@@jfversluis Thank you so much :)
so i am running this on android emulator and it works but there are no files on emulator to pick and there is no way to go back to app. Am I missing something?
On Android there is always the back button! You can drag files from your desktop on to the Android emulator to add them there.
Is there an option on this API to limit how many images to pick in multiple option??
I don't think we have that right now
@@jfversluis Thank you for the response, do you think we have an option that would downsize the image? I'm uploading the image on a Firebase Firestore and downloading it will take 30 to 40 seconds to load on my app, depending on the size of the image. Do you have any suggestions for this to be fixed? I don't want my users to wait for 30 to 40 seconds just for the page to load their images.
Has Maui file save picker?
Being worked on in the .NET MAUI Community Toolkit
What about using a file that's on a normal one drive folder? Picker does not work for me
I guess that's because the file is not actually on the drive. It's only a reference and is downloaded as requested which is maybe not triggered be the fact that the file picker picks it. Not sure, just thinking out loud :)
@@jfversluis Yes, and you end up with a file created in the directory of the application (just a guess - device not rooted) But other applications are able to do it so I don't understand... For context, wanted a sqlite database synchronized via onedrive (was going to try dropbox as well, but suspect maybe same problem)
@@Wayne_Mather sure there is probably something to make it work, but I don’t know how without looking into it, sorry!
@@jfversluis hmm, sounds like a perfect candidate for a video! Maybe even how to debug the MAUI code base to understand just whats happening? As it maybe an issue with how onedrive responds to the request and the picker API handling that response
Ola, com injecao de dependencia...
All of these APIs can be used with dependency injection
The file picker causes the app to crash if no file is selected
File picker returns null of no file is chosen. This is documented and as per design.
On Windows, the FilePicker.PickAsync gives me a "System.ArgumentException: Value does not fall within the expected range." ?
Hm not sure, sorry! If you believe there is a bug check if there is an issue on the repo for it
255 likes, perfect octet
Nobody touch anything!
Merci !
Oh no you merci David! Thank you so much for the support 🙏
Hi Gerald,
another great video from you, you the man!!
i was wondering if i could actually produce a Base64 string from the stream, i mean i did it and it works on Android emulator , but when i actually publish it then upon saving it gives me "Unexpected character encountered while parsing value: new MemoryStream(bytes));
imageBase64 = System.Convert.ToBase64String(bytes);
}
}
"Unexpected character encountered while parsing value:
@@jfversluis that is 100% true, but I am puzzled as to why exact same code works on emulators and web version of this app, but not when I publish it to device, I am wondering if the device itself adds something to it,🤔🤔🤔
Thanks for the quick reply though 🙏🙏
Try to find what is different. There has to be something. Try to recreate the request with something like postman. Or debug through it and inspect what the response is that is coming back.
@@jfversluis the issue was the size and format of the file being uploaded from devices itself, when I edit the file and make it smaller then everything works,
Thanks!!
13:30 for some reason this doesn't seem to work with Gifs on Android.
My code:
var costumFileType =
new FilePickerFileType(new Dictionary
{
{DevicePlatform.iOS, new[] {"com.adobe.gif"} },
{DevicePlatform.Android, new[] { "application/gif" } },
{DevicePlatform.WinUI, new[] {".gif"} }
});
You can't just replace the extension in the mime type or the UTType for iOS. The right mime type for a gif is image/gif
@@jfversluis thanks, I don't know why I didn't think of that 😅