Get file path from system directory using Flutter web (chrome) to read file content Eg: CSV or Text file

1
votes

Package tried: https://pub.dev/packages/file_picker

Tried the example code implementation shared via GitHub. But the file path is returned as null for web platform. Where same implementation in mobile platform return the path as expected.

https://github.com/miguelpruivo/flutter_file_picker/blob/master/example/lib/src/file_picker_demo.dart

Things aware of:

  1. Path_Provider - Not supported for web
  2. dart-io-library - Not supported for web
  3. Open issue in Flutter Repo

Goal is to read the file from the path and not to upload. Any workaround to achieve this will be helpful.

Flutter channel: beta

2
flutterflutter-web

2 Answers

1
votes

As mentioned in the file_picker FAQ:

Paths aren't inaccessible from browsers since those provide fake paths. If you want to create a File instance to upload it somewhere, like FireStorage, you can do so with the bytes directly.

final result = await FilePicker.platform.pickFiles(type: FileType.any, allowMultiple: false);

if (result.files.first != null){
  var fileBytes = result.files.first.bytes;
  var fileName = result.files.first.name;
  print(String.fromCharCodes(fileBytes));
}
1
votes

I have a function for picking image from computer. Might work for you.


import 'dart:html';

void uploadImage({@required Function(File file) onSelected}) {
  InputElement uploadInput = FileUploadInputElement()..accept = 'image/*';
  uploadInput.click();

  uploadInput.onChange.listen((event) {
    final file = uploadInput.files.first;
    final reader = FileReader();
    reader.readAsDataUrl(file);
    reader.onLoadEnd.listen((event) {
      onSelected(file);
    });
  });
}