File Picker on Flutter Web

file_picker.dart

_startFilePicker() async {
    
    InputElement uploadInput = FileUploadInputElement();
    uploadInput.accept = '.csv';
    uploadInput.click();

    uploadInput.onChange.listen((e) {
      // read file content as dataURL
      final files = uploadInput.files;
      if (files.length == 1) {
        final file = files[0];
        final reader = new FileReader();

        reader.onLoadEnd.listen((e) {
          print(e);
          print('loaded: ${file.name}');
          print('type: ${reader.result.runtimeType}');
          print('file size = ${file.size}');
          _handleResult(reader.result);
        });
        reader.readAsDataUrl(file);
      }
    });
  }

How to convert this reader.result into meaningful data ?

I don't remember what I want to do with this. But if you want to use a file picker you can check: https://pub.dev/packages/file_picker. This package contains support for Flutter Web. 👍

I needed this code to read CSV file using Flutter web.. As web does not support file.path .. I solved this issue by creating a new function which convert file content to Uint8List and then decode it utf8.

how did u do that? i want to do the exact same thing .. can you help me? @Shahidbangash

how did u do that? i want to do the exact same thing .. can you help me? @Shahidbangash

Facing this same issue, please help if you got the solution!!

@akshayMunotecgit you can try to edit this code to suite your needs, basically its file upload since you are using flutter web, so you cant use the local PC path, you use the bytes value, which is a list of integers that doesnt make any sense to you, well this list is actually transformed several times untill you get the data inside the csv or xlsx file

final List finalCsvContent = [];

FilePickerResult? result = (await FilePicker.platform.pickFiles(
withData: true,
type: FileType.custom,
allowedExtensions: ['csv'],
));
var file = result?.files.first.bytes; //bytes
String s = String.fromCharCodes(file!); // convert to string
var outputAsuint8List = Uint8List.fromList(s.codeUnits); // convert to Uint8List
var csvFileContentList = utf8.decode(outputAsuint8List).split('\n'); // decode Uniform text format 8 List into the content list
csvFileContentList.removeAt(0); // rounding for garbage value
csvFileContentList.forEach((element) {
List currentRow = [];
element.toString().split(",").forEach((items) {
currentRow.add(items.trim());
});
finalCsvContent.add(currentRow);
});

finalCsvContent.removeAt(finalCsvContent.length - 1); // rounding for garbage value

@akshayMunotecgit you can try to edit this code to suite your needs, basically its file upload since you are using flutter web, so you cant use the local PC path, you use the bytes value, which is a list of integers that doesnt make any sense to you, well this list is actually transformed several times untill you get the data inside the csv or xlsx file

final List finalCsvContent = [];

FilePickerResult? result = (await FilePicker.platform.pickFiles( withData: true, type: FileType.custom, allowedExtensions: ['csv'], )); var file = result?.files.first.bytes; //bytes String s = String.fromCharCodes(file!); // convert to string var outputAsuint8List = Uint8List.fromList(s.codeUnits); // convert to Uint8List var csvFileContentList = utf8.decode(outputAsuint8List).split('\n'); // decode Uniform text format 8 List into the content list csvFileContentList.removeAt(0); // rounding for garbage value csvFileContentList.forEach((element) { List currentRow = []; element.toString().split(",").forEach((items) { currentRow.add(items.trim()); }); finalCsvContent.add(currentRow); });

finalCsvContent.removeAt(finalCsvContent.length - 1); // rounding for garbage value

This does help! Thanks a lot!!