How to display a dart:html file image in Flutter web?

Question

I upload a file from the users device this way:

void uploadImage() async {
    html.InputElement uploadInput = html.FileUploadInputElement();
    uploadInput.click();
    uploadInput.onChange.listen(
      (changeEvent) {
        final file = uploadInput.files.first;
        final reader = html.FileReader();

        reader.readAsDataUrl(file);
        reader.onLoadEnd.listen(
          (loadEndEvent) async {
            setState(() {
              image = file; //image is a dart:html File object, it's a field of my statefulwidget
            });
          },
        );
      },
    );
  }
}

I would like to display this image. I tried using an Image.file:

           Container(
              width: 100,
              height: 100,
              child: Image.file(
                image,
                fit: BoxFit.contain,
              ),
            ),

However this gives me this error:

The argument type 'File (where File is defined in C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\html\html_dart2js.dart)' can't be assigned to the parameter type 'File (where File is defined in C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\io\file.dart)'.dartargument_type_not_assignable html_dart2js.dart(15975, 7): File is defined in C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\html\html_dart2js.dart file.dart(241, 16): File is defined in C:\Users\Asus\Documents\flutter\bin\cache\pkg\sky_engine\lib\io\file.dart Peek Problem (Alt+F8) No quick fixes available

Is there a way to convert a dart:html File into a dart:io File? Or should I try another way of displaying the image? In that case how do I display a dart:html File?

Thanks for your help in advance!

Thierry Titcheu Thierry Titcheu · Accepted Answer · 2020-09-06T03:17:52

One solution is to use the image_whisperer package.

Lets say that your html.File is variable myfile, The following works for me:

import 'package:flutter/painting.dart';  // NetworkImage
import 'package:image_whisperer/image_whisperer.dart';  // BlobImage
...

BlobImage blobImage = new BlobImage(myfile, name: myfile.name);
final image = NetworkImage(blobImage.url);

// Use image here
...

How to display a dart:html file image in Flutter web?

1 Answers