Image.file is not supported on Flutter Web. How to get image from gallery/camera for the Flutter Web?

Question

I get the error below while running the Flutter app on the Chrome web browser. I picked an Image from the gallery:

  Future getImage() async {
    try {
      final image = await ImagePicker().pickImage(source: ImageSource.gallery);
      if (image == null) {
        return;
      }
      final imageTemp = XFile(image.path);
      setState(() => this._userImage = imageTemp);
    } on PlatformException catch (e) {
      e.stacktrace;
    }
  }

Code:

  dynamic getUserImage() {
    if (_userImage?.path == null) {
      return const Icon(
        Icons.person,
        color: Colors.grey,
        size: 54,
      );
    } else {
      return Image.file(File(_userImage!.path));
    }
  }

Image:

What should I use or change to pick an image from the Web gallery or Camera?

Sparteine

Answer 1

Try Image.network(image.path) instead as browser doesn't support to access user's file system.

Since Web Browsers don't offer direct access to their users' file system, this plugin provides a PickedFile abstraction to make access uniform across platforms.

See Limitations on the web platform for details.

Confabulation

Answer 2

Flutter web is not support File (from dart.io).

There for I just make your method more advance which can used in flutter web ( also Android and IOS ).

After picking successfully image from gallery/Camera we convert into Uint8List.

And then we can display image using Image.memory();

Pick from Gallery

Future<Uint8List?> galleryImagePicker() async {
  ImagePicker picker = ImagePicker();

  XFile? file = await picker.pickImage(
    source: ImageSource.gallery,
    imageQuality: 90,
  );

  if (file != null) return await file.readAsBytes(); // convert into Uint8List.
  return null;
}

Pick from Camera

Future<Uint8List?> cameraImagePicker() async {

  ImagePicker picker = ImagePicker();
  XFile? file = await picker.pickImage(
    source: ImageSource.camera,
    imageQuality: 90,
  );

  if (file != null) return await file.readAsBytes(); // convert into Uint8List.
  return null;
}

Show Sample Code

 // veriable declare 
 Uint8List? registrationImage; // import 'package:flutter/services.dart';

            onTap: () async {
              final Uint8List? image = await galleryImagePicker();

              if (image != null) {
                registrationImage = image;
                setState(() {});
              }
            },

 // And then Display Image 
  
      Image.memory (
                   registrationImage!,
                   fit: BoxFit.cover,
               ),

Hope this will help you ! Thank You

Cup

That's an intelligent solution – Rosetterosewall

Answer 3

This will work

Image.network(imageFile!.path),

Image.file is not supported on flutter web, the Image.network works.

Lixivium

Answer 4

Try Web Image picker or check web support for the package you are using Image Picker

Cutlor