Flutter Web - How to pick a PDF file and POST to an API?

Question

I am building a Flutter Web app, a part of which the user can select one or multiple PDF's from their computer. This PDF will then be sent to an API. Is there a way to do this on Flutter Web?

Answer 1

You can use file_picker 1.12.0 :

dependencies:
  file_picker: ^1.12.0

This package allows you to use a native file explorer to pick single or multiple absolute file paths, with extensions filtering support.

Answer 2

With reference from this solution, I've prepared the helper class to ease the document picking on flutter web:

import 'dart:async';
import 'package:universal_html/prefer_universal/html.dart';

class DocumentPicker
{
  static Future<List<dynamic>> open({ List<String> types, bool multiple = false}) async {

    final completer = Completer<List<String>>();
    InputElement uploadInput = FileUploadInputElement();

    if(types != null  && types.length > 0){
      String theTypes = types.join(',');
      uploadInput.accept = theTypes;
    }

    uploadInput.multiple = multiple;
    uploadInput.click();
    uploadInput.addEventListener('change', (e) async {
      final files = uploadInput.files;
      Iterable<Future<String>> resultsFutures = files.map((file) {
        final reader = FileReader();
        reader.readAsDataUrl(file);
        reader.onError.listen((error) => completer.completeError(error));
        return reader.onLoad.first.then((_) => reader.result as String);
      });
      final results = await Future.wait(resultsFutures);
      completer.complete(results);
    });

    document.body.append(uploadInput);
    return completer.future;
  }
}

Example:

if(kIsWeb) {
      DocumentPicker.open(types: ['application/pdf']).then((list) {
        processList(list);
      });
      return;
    }

This will return a list of base64 encoded string for picked files.