How to add a File Picker plugin in Flutter?

Question

I am creating a Flutter project in which, I have a piece of data (JSON) that I want to Import from and Export to a location the user wants to. In order to achieve this, I require a File Picker plugin in Flutter. Now, I searched the Dart Packages repository for "file picker" but didn't find one.

Is there a way to get a File Picker that looks like this:

or even this...

The first screenshot is preferable for me as it allows file selection from different sources (like Drive).

Also, since I want to Export the data, I might want a Folder Picker too. ;)
But, if there is any other alternative to Folder Picker. I'd be happy to know...

Perplex

You'd have to build your own UI, but the path_provider plugin gives cross-platform access to a couple of directories. Does iOS natively have a screen similar to the first image? You could also create a plugin that uses platform channels – Pontoon

Answer 1

I've created a file_picker plugin some time ago in order to make it possible to pick (both on iOS and Android) absolute paths and then loaded it with Flutter.

You can check it here: https://pub.dev/packages/file_picker

Hellen

This is nice plugin. I have a specific requirement to allow picking Image and PDF files only. Is there a way to provide multiple whitelisted file extensions? – Viva

@MilindMevada at the moment not. You can't get multiple file extension filter at the same time, unless you use FileType.IMAGE or FileType.VIDEO or so. In this case yes. However, for other custom types. it makes it hard because I try to keep the interaction between iOS and Android as seamless as possible so the dev doesn't have to be handling himself in the app. – Hellen

Thank you so much for the info. Flutter community really appreciate the open source contributions. – Viva

Will there be a Desktop implementation of this plugin? – Sasha

Yes. It’s in the upcoming features, both Desktop and Web. – Hellen

@MiguelRuivo great work sir ,but it says No implementation found for method any on channel miguelruivo.flutter.plugins.filepicker – Gerius

A flutter clean should probably fix it. – Hellen

@MiguelRuivo Thanks sir for the nice plugin, I used this plugin once ago, and it was working perfectly, but now it show this message the method 'getFile' isn't defined for the type 'FilePicker'. – Arginine

@NahamAl-Zuhairi you've probably updated the plugin to a later version. You've probably need to use it now as FilePicker.platform.pickFiles(). Check it here. – Hellen

Does Flutter really provide NO builtin file chooser dialog? Can't believe. Created a MacOS app - but can's save file generated stuff? – Kaliningrad

Note, that Flutter.dev team's FileSelector (see answer above) depends on nothing. – Kaliningrad

Answer 2

I used file_picker library to pick files. you can use this for pick images as well.

Future getPdfAndUpload(int position) async {

    File file = await FilePicker.getFile(
      type: FileType.custom,
      allowedExtensions: ['pdf','docx'], //here you can add any of extention what you need to pick
    );

    if(file != null) {

      setState(() {

          file1 = file; //file1 is a global variable which i created
     
      });

    }
  }

here file_picker flutter library.

Shane

try this version. file_picker: ˆ1.12.0 – Shane

Answer 3

I'm in the exact same boat as you, haha!

I noticed documents_picker 0.0.2. It allows the user to pick multiple files, and it seems to fit the need!

check it out: https://pub.dartlang.org/packages/documents_picker#-readme-tab-

Roller

Does it incorporate picking of folders? – Perplex

Heck. It doesn't. It only allows for specific types, unfortunately. I'll keep searching @MelvinAbraham – Roller

Thanks a lot! I haven't tested this plugin, since I don't have my desktop right now... Does it provide an interface similar to the 1st screenshot? – Perplex

Answer 4

Here's a better document picker. It looks like the native document picker from the Storage Access Framework, which is what you have in your picture. flutter_document_picker

Nonnah

Answer 5

Just found the FileSelector plugin from flutter.dev. Compatible with MacOS, Windows and Web.

From its pub.dev page:

Open a single file

final typeGroup = XTypeGroup(label: 'images', extensions: ['jpg', 'png']);
final file = await openFile(acceptedTypeGroups: [typeGroup]);

Open multiple files at once

final typeGroup = XTypeGroup(label: 'images', extensions: ['jpg', 'png']);
final files = await openFiles(acceptedTypeGroups: [typeGroup]);

Saving a file

final path = await getSavePath();
final name = "hello_file_selector.txt";
final data = Uint8List.fromList("Hello World!".codeUnits);
final mimeType = "text/plain";
final file = XFile.fromData(data, name: name, mimeType: mimeType);
await file.saveTo(path);

MacOS: Provide file read or/and write privileges

On target MacOS please provide sufficient rights using Xcode:

In case you don't provide file read or/and write permissions, the call to

final XFile? file =
    await openFile(acceptedTypeGroups: <XTypeGroup>[typeGroup]);

neither shows anything not returns.

Kaliningrad