How to Display Images in Flutter Web Using File Picker Package?

Question

I'm developing a Flutter web application where I need to display images selected by the user. The application uses the file picker package, which works flawlessly on mobile platforms. However, when running on the web, the console outputs the following error message:

C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15           <fn>
      On web `path` is always `null`,
      You should access `bytes` property instead,
      Read more about it [here](https://github.com/miguelpruivo/flutter_file_picker/wiki/FAQ)

Below is the snippet of my code responsible for picking and attempting to display the images:

utils.dart:

Future<List<File>> pickImages() async {
  List<File> images = [];
  try {
    var files = await FilePicker.platform
        .pickFiles(type: FileType.image, allowMultiple: false);
    if (files != null && files.files.isNotEmpty) {
      for (int i = 0; i < files.files.length; i++) {
        images.add(File(files.files[i].path!));
      }
    }
  } catch (e) {
    debugPrint(e.toString());
  }
  return images;
}

stack_all.dart:

class _StackePagesState extends State<StackePages> {
  Offset? tapOffset;
  List<File> images = [];

  final ScrollController _horizontal = ScrollController();


  void selectImages() async {
    var res = await pickImages();
    setState(() {
      images = res;
    });
  }

...

@override
  Widget build(BuildContext context) {
    final user = Provider.of<UserProvider>(context).user;
...

  PopupMenuItem(
                                  child: ListTile(
                                      title: Text(
                                        'Update pic',
                                        style: GoogleFonts.nunito(
                                          color: const Color(0xff3B3B3B),
                                          fontSize: 16.0,
                                          fontWeight: FontWeight.w500,
                                        ),
                                      ),
                                      trailing: const Icon(
                                        Icons.photo_camera_outlined,
                                        color: Color(0xff3B3B3B),
                                        size: 20,
                                        semanticLabel:
                                            'Pomodoro timer Update pic',
                                      ),
                                      contentPadding: EdgeInsets.zero,
                                      onTap: selectImages
                                      ),
                                ),


...

  icon: Tooltip(
                          message: 'Profile',
                          child: Semantics(
                            label: 'Pomodoro timer More',
                            enabled: true,
                            readOnly: true,
                            child: SizedBox(
                                height: 24,
                                width: 24,
                                child:  images.isNotEmpty
                                        ? CircleAvatar(
                                          radius: 14,
                                          backgroundColor: Colors.white,
                                          child: CarouselSlider(
                                              items: images.map(
                                                (i) {
                                                  return Builder(
                                                    builder:
                                                        (BuildContext context) =>
                                                            Image.file(
                                                      i,
                                                      fit: BoxFit.cover,
                                                      height: 200,
                                                    ),
                                                  );
                                                },
                                              ).toList(),
                                              options: CarouselOptions(
                                                viewportFraction: 1,
                                                height: 200,
                                              )),
                                        )
                                        : const Icon(
                                            Icons.account_circle_outlined,
                                            color: Color(0xff3B3B3B),
                                            size: 24,
                                            semanticLabel:
                                                'Pomodoro timer Profile',
                                          )),
                          ),
                        ),

I've attempted to follow the advice in the error message regarding accessing the bytes property instead of the path, but I'm unsure how to properly implement this for displaying images.

Could anyone guide me on how to adjust my code to display images on Flutter web correctly, considering the error advice?

edwinmacalopú · Accepted Answer · 2023-02-04 04:20:16Z

2

the error gives you the answer, in flutter web you cannot access the path The paths are not inaccessible from browsers.the documentation indicates it https://github.com/miguelpruivo/flutter_file_picker/wiki/FAQ If you want to save the image you must save as bytes here a small example

Future<List<Uint8List>> pickImages() async {
  List<Uint8List> images = [];
  try {
    var files = await FilePicker.platform
        .pickFiles(type: FileType.image, allowMultiple: false);
    if (files != null && files.files.isNotEmpty) {
      for (int i = 0; i < files.files.length; i++) {
        images.add(files.files[i].first.bytes!);
      }
    }
  } catch (e) {
    debugPrint(e.toString());
  }
  return images;
}

change image.assets to image.memory

return Builder(
 builder:
(BuildContext context) =>
Image.memory(
i,
fit: BoxFit.cover,
height: 200,
),

Since you are running on a mobile app and also on the web you should use a flag to check what platform you are on.

import 'package:flutter/foundation.dart';

  if (kIsWeb) {
    // here code for web (bytes)
  }else{
  //here code for mobil (path)
  }

edited Feb 4, 2023 at 4:20

answered Feb 4, 2023 at 0:11

edwinmacalopú

1615 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pomoworko.com Over a year ago

Hello @edwinmacalopú I got this error

The getter 'first' isn't defined for the type 'PlatformFile'. Try importing the library that defines 'first', correcting the name to the name of an existing getter, or defining a getter or field named 'first'.

what should I do?

edwinmacalopú Over a year ago

@caroc i just edited the code instead of having a list of files it should be a list of bytes Uint8List

Collectives™ on Stack Overflow

How to Display Images in Flutter Web Using File Picker Package?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related