A flutter widget to showcase and process uploaded files on Web, Android, Ios, MacOs, Linux & Windows.

Live Web Demo

Pub Build Status Live Web Example Build Status

Last Commit Open Issues Closed Issues

Github Repo Stars


  • Show case files in a scrollable widget, selected using file_picker

  • Access and process the selected files inside the flutter app


Alt Text

Desktop - MacOs & Windows

Alt Text

Mobile - Android & Ios

Alt Text

Upcoming Features

  • File preview
  • File name editing
  • File sharing

Getting started

Follow these simple steps to get started with FileCase, for detailed example see example folder.

  • Create an instance of FileCaseController and provide a unique string as tag
final firstController = FileCaseController(
      filePickerOptions: FilePickerOptions(type: FileType.any),
      tag: 'controller1');

Pass FilePickerOptions to customize pickFiles functionality from file_picker. For information about FilePickerOptions, hover over the parameters and see the docs.

  • Use the FileCase widget in your UI and pass the same tag string as for the FileCaseController
const FileCase(
              tag: 'controller1',

  • Use the FileUploadIconButton or FileUploadButton in your UI to be able to pick files.
    Pass the same tag string as for the corresponding FileCaseController and FileCase.

const FileUploadIconButton(tag: 'controller1'),


const FileUploadButton(tag: 'controller1'),


Sending files over an API

  • Using FormData

    FormData is available in Dio

import 'package:dio/dio.dart' as dio;

class NetworkService {

  final url = ''; // local host url

  uploadFiles(List<PlatformFile> platformFiles) async {

    final formData = dio.FormData();

    formData.files.addAll(platformFiles.map((platformFile) => MapEntry(
        dio.MultipartFile.fromBytes(platformFile.bytes as List<int>,
            filename: platformFile.name))));

    final response = await dio.Dio().post(url, data: formData);
  • Using MultipartRquest

    MultipartRequest is available in http
import 'package:http/http.dart' as http;

class NetworkService {

  final url = ''; // local host url

  uploadFiles(List<PlatformFile> platformFiles) async {

    final response =
          http.MultipartRequest('POST', Uri.parse(url + '/fileupload'))

            //For single file - Remove this comment for usage
                'file', files.first.bytes as List<int>,
                filename: 'newupload.txt'))

            //For multiple files - Remove this comment for usage
            ..files.addAll(files.map((file) => http.MultipartFile.fromBytes(
                'file', file.bytes as List<int>,
                filename: file.name)))

      final finalResponse = await response.send();

http.MultipartRequest does not return a response body.

Additional information

Will be included in the future builds.


GitHub Contributors Image