Flutter Web Image picker get only images files

Question

I'm trying to get images from flutter web, and now i'm doing to this way

try {
  final html.InputElement input = html.document.createElement('input');
  input
    ..type = 'file'
    ..accept = 'image/*';

  input.onChange.listen((e) {
    if (input.files.isEmpty) return;
    final reader = html.FileReader();
    reader.readAsDataUrl(input.files[0]);
    reader.onError.listen((err) => setState(() {
          print(err.toString());
        }));
    reader.onLoad.first.then((res) {
      final encoded = reader.result as String;
      // remove data:image/*;base64 preambule
      final stripped =
          encoded.replaceFirst(RegExp(r'data:image/[^;]+;base64,'), '');

      setState(() {
        backgroundBytes = base64.decode(stripped);
        backgroundImage = input.files[0];
        metaDataBackground = input.files[0].type;
      });
    });
  });

  input.click();
} catch (e) {
  print('Error background image');
}

Its works perfectly, but the user can change file type admitted to all files, and i have to block that action

Bloack acction picker

Is there any way to do this?

Answer 1

You can not block that action see reference Limit file format when using <input type="file">?
Using the accept attribute only provides a way of filtering in the files of types that are of interest. Browsers still allow users to choose files of any type.

In input.onChange.listen , you can check file extension type and alert warning user that he did not select right type