https://github.com/flutter-form-builder-ecosystem/form_builder_file_picker
File picker field widget for FlutterFormBuilder.
https://github.com/flutter-form-builder-ecosystem/form_builder_file_picker
dart file flutter flutter-form-builder form
Last synced: 4 months ago
JSON representation
File picker field widget for FlutterFormBuilder.
- Host: GitHub
- URL: https://github.com/flutter-form-builder-ecosystem/form_builder_file_picker
- Owner: flutter-form-builder-ecosystem
- License: bsd-3-clause
- Created: 2019-12-06T19:04:38.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2025-05-28T01:12:06.000Z (about 1 year ago)
- Last Synced: 2025-06-05T07:31:37.215Z (12 months ago)
- Topics: dart, file, flutter, flutter-form-builder, form
- Language: C++
- Homepage: https://pub.dev/packages/form_builder_file_picker
- Size: 519 KB
- Stars: 16
- Watchers: 4
- Forks: 35
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Form Builder File Picker
File Picker Field for [flutter_form_builder](https://pub.dev/packages/flutter_form_builder) package
[](https://pub.dev/packages/form_builder_file_picker)
[](https://github.com/flutter-form-builder-ecosystem/form_builder_file_picker/actions/workflows/base.yaml)
[](https://www.codefactor.io/repository/github/flutter-form-builder-ecosystem/form_builder_file_picker)
___
- [Features](#features)
- [Use](#use)
- [Setup](#setup)
- [Basic use](#basic-use)
- [Specific uses](#specific-uses)
- [Support](#support)
- [Contribute](#contribute)
- [Questions and answers](#questions-and-answers)
- [Donations](#donations)
- [Roadmap](#roadmap)
- [Ecosystem](#ecosystem)
- [Thanks to](#thanks-to)
## Features
- Automatic handle permissions
- Show images preview
## Use
### Setup
Since this package makes use of [file_picker](https://pub.dev/packages/file_picker) package, for platform specific setup follow [this instructions](https://github.com/miguelpruivo/flutter_file_picker/wiki/Setup)
### Basic use
```dart
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_file_picker/form_builder_file_picker.dart';
FormBuilderFilePicker(
name: "images",
decoration: InputDecoration(labelText: "Attachments"),
maxFiles: null,
previewImages: true,
onChanged: (val) => print(val),
typeSelectors: [
TypeSelector(
type: FileType.any,
selector: Row(
children: [
Icon(Icons.add_circle),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text("Add documents"),
),
],
),
),
],
onFileLoading: (val) {
print(val);
},
),
```
### Specific uses
On mobile platforms the file picker will open a default document picker if used with `FileType.any`.
If you want to be able to pick documents and images in the same form field, you will need to define different file types and different selectors. To achieve this use the `typeSelectors` parameter.
This way the user will see two buttons to open a file picker for documents and a file picker for the photos gallery.
For example:
```dart
FormBuilderFilePicker(
name: "attachments",
previewImages: false,
allowMultiple: true,
withData: true,
typeSelectors: [
TypeSelector(
type: FileType.any,
selector: Row(
children: [
Icon(Icons.add_circle),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text("Add documents"),
),
],
),
),
if (!kIsWeb)
TypeSelector(
type: FileType.image,
selector: Row(
children: [
Icon(Icons.add_photo_alternate),
Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text("Add images"),
),
],
),
),
],
)
```
## Support
### Contribute
You have some ways to contribute to this packages
- Beginner: Reporting bugs or request new features
- Intermediate: Implement new features (from issues or not) and created pull requests
- Advanced: Join the [organization](#ecosystem) like a member and help coding, manage issues, dicuss new features and other things
See [contribution guide](https://github.com/flutter-form-builder-ecosystem/.github/blob/main/CONTRIBUTING.md) for more details
### Questions and answers
You can question or search answers on [Github discussion](https://github.com/flutter-form-builder-ecosystem/form_builder_file_picker/discussions) or on [StackOverflow](https://stackoverflow.com/questions/tagged/flutter-form-builder)
### Donations
Donate or become a sponsor of Flutter Form Builder Ecosystem
[](https://opencollective.com/flutter-form-builder-ecosystem)
## Roadmap
- [Add visual examples](https://github.com/flutter-form-builder-ecosystem/form_builder_file_picker/issues/37) (images, gifs, videos, sample application)
- [Solve open issues](https://github.com/flutter-form-builder-ecosystem/form_builder_file_picker/issues), [prioritizing bugs](https://github.com/flutter-form-builder-ecosystem/form_builder_file_picker/labels/bug)
## Ecosystem
Take a look to [our awesome ecosystem](https://github.com/flutter-form-builder-ecosystem) and all packages in there
## Thanks to
[All constributors](https://github.com/flutter-form-builder-ecosystem/form_builder_file_picker/graphs/contributors)