Post
Ask Question

Xamarin.Forms - File Browser

Introduction

 
Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.
 
 
Prerequisites
  • Visual Studio 2017 or later (Windows or Mac)

Setting up a Xamarin.Forms Project

 
Start by creating a new Xamarin.Forms project. You wíll learn more by going through the steps yourself.
 
Create a new or existing Xamarin forms(.Net standard) Project with Android and iOS Platform.
 
 
Nuget
 
Install the following Nuget from Nuget Manager In your Visual Studio.
 
 Name  Xamarin.Plugin.FilePicker
 Version    2.1.41
 Url  https://www.nuget.org/packages/Xamarin.Plugin.FilePicker/ 
 
Xamarin.Essentials
 
Xamarin.Essentials also supports File Picker but it's in Preview. Once the FilePicker is moved to stable you can update Xamarin.Pulgin.FilePicker to Xamarin.Essentials from here.
 
Setup UI
 
Now, I created a simple UI for file browser.
 
MainPage.xaml
  1. <?xml version="1.0" encoding="utf-8"?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="FileUploadPOC.MainPage">    
  3.     <StackLayout HorizontalOptions="Center">    
  4.         <!-- Place new controls here -->    
  5.         <Image Source="xamarinmonkeysbanner.png" HorizontalOptions="Center" Margin="0,100,0,0"/>    
  6.         <Button Margin="0,20,0,0" Text="Browse File" Clicked="Button_Clicked"></Button>    
  7.         <Label x:Name="lblName"/>    
  8.         <Label x:Name="lblFilePath"/>    
  9.     </StackLayout>    
  10. </ContentPage>     
File Browser
 
Below code is for file picker. Here we will get two values, FileName and FilePath.
  1. private async Task PickAndShow(string[] fileTypes)  
  2.         {  
  3.             try  
  4.             {  
  5.                   
  6.                 var pickedFile = await CrossFilePicker.Current.PickFile(fileTypes);  
  7.                 if (pickedFile != null)  
  8.                 {  
  9.                     lblName.Text = pickedFile.FileName;  
  10.                     lblFilePath.Text = pickedFile.FilePath;  
  11.                 }  
  12.             }  
  13.             catch (Exception ex)  
  14.             {  
  15.                   
  16.             }  
  17.         }  
File Types
 
Note, you can define the file types for platform specific.
  1. if (Device.RuntimePlatform == Device.Android)  
  2.             {  
  3.                 fileTypes = new string[] { "image/png", "image/jpeg" };  
  4.             }  
  5.   
  6.             if (Device.RuntimePlatform == Device.iOS)  
  7.             {  
  8.                 fileTypes = new string[] { "public.image" }; // same as iOS constant UTType.Image  
  9.             }  
  10.   
  11.             if (Device.RuntimePlatform == Device.UWP)  
  12.             {  
  13.                 fileTypes = new string[] { ".jpg", ".png" };  
  14.             }  
  15.   
  16.             if (Device.RuntimePlatform == Device.WPF)  
  17.             {  
  18.                 fileTypes = new string[] { "JPEG files (*.jpg)|*.jpg", "PNG files (*.png)|*.png" };  
  19.             }  
Reference for other file types,
 
https://stackoverflow.com/questions/41797644/xamarin-ios-filtering-out-the-filetype-show-on-document-picker
 
MainPage.Xaml.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel;  
  4. using System.Linq;  
  5. using System.Text;  
  6. using System.Threading.Tasks;  
  7. using Xamarin.Forms;  
  8. using Plugin.FilePicker;  
  9. using Xamarin.Essentials;  
  10. using System.Security.Cryptography.X509Certificates;  
  11.   
  12. namespace FileUploadPOC  
  13. {  
  14.     // Learn more about making custom code visible in the Xamarin.Forms previewer  
  15.     // by visiting https://aka.ms/xamarinforms-previewer  
  16.     [DesignTimeVisible(false)]  
  17.     public partial class MainPage : ContentPage  
  18.     {  
  19.         public MainPage()  
  20.         {  
  21.             InitializeComponent();  
  22.         }  
  23.   
  24.         async void Button_Clicked(System.Object sender, System.EventArgs e)  
  25.         {  
  26.             try  
  27.             {  
  28.                 string[] fileTypes = null;  
  29.                 if (Device.RuntimePlatform == Device.iOS)  
  30.                 {  
  31.                     fileTypes = new string[] {"com.adobe.pdf", "public.rft", "com.microsoft.word.doc", "org.openxmlformats.wordprocessingml.document" };                 }  
  32.                 await PickAndShow(fileTypes);  
  33.             }  
  34.             catch (Exception ex)  
  35.             {  
  36.   
  37.             }  
  38.               
  39.         }  
  40.   
  41.         private async Task PickAndShow(string[] fileTypes)  
  42.         {  
  43.             try  
  44.             {  
  45.                   
  46.                 var pickedFile = await CrossFilePicker.Current.PickFile(fileTypes);  
  47.                 if (pickedFile != null)  
  48.                 {  
  49.                     lblName.Text = pickedFile.FileName;  
  50.                     lblFilePath.Text = pickedFile.FilePath;  
  51.                 }  
  52.             }  
  53.             catch (Exception ex)  
  54.             {  
  55.                   
  56.             }  
  57.         }  
  58.     }  
  59. }  
Debug your App
 
 
 
 
Download source code here.
 
I hope you have understood how to browse files in your device and drive in Xamarin.Forms.
 
Thanks for reading. Please share your comments and feedback. Happy Coding :)


Similar Articles