I want to upload an Image as a File type in Flutter web app

Question

I am trying to upload the image in flutter web app but ImagePicker is not working for web app and i am using another plugin ImagePickerWeb but it is also doesn't seem to be working.

File image;
      // image = await ImagePickerWeb.getImage(outputType: ImageType.file);
      Image i = await ImagePickerWeb.getImage(outputType: ImageType.widget);
      print("imageeeeee");
      // print(i.toString());
      if(i!=null){
      File temp = await ImageUtils.imageToFile(imageName: i.toString(),ext: "jpg");
      // print(image.path);
      // image = (await FlutterWebImagePicker.getImage) as File;
      // print("printing image from gallery $image");

      image = temp;
    
    // final picker = ImagePicker();

    // final pickedFile = await picker.getImage(source: ImageSource.gallery);
    // print('PickedFile: ${pickedFile.toString()}');

    if(image!=null){
    setState(() {
      // image = File(pickedFile.path);
      model.image = image;
      _image = image;
      final bytes = image.readAsBytesSync();
      String _img64 = base64Encode(bytes);
      imageModel.value = "data:image/png;base64," + _img64;
    });
      }}
    print("printing image");

Answer 1

I wrote an example using image_picker_web: ^1.0.9

Here.

import 'package:flutter/material.dart';
import 'package:image_picker_web/image_picker_web.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Home());
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  MediaInfo mediaInfo;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedContainer(
            height: mediaInfo == null ? 50 : 200,
            width: double.maxFinite,
            duration: Duration(milliseconds: 200),
            decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),
                borderRadius: BorderRadius.circular(4)),
            child: Builder(
              builder: (context) {
                if (mediaInfo == null) {
                  return Center(
                    child: Text("Select An Image"),
                  );
                }
                return ClipRRect(
                  child: Image.memory(
                    mediaInfo.data,
                    semanticLabel: mediaInfo.fileName,
                    fit: BoxFit.contain,
                  ),
                  borderRadius: BorderRadius.circular(4),
                );
              },
            ),
          ),
          SizedBox(height: 20),
          RaisedButton(
            onPressed: () {
              pickImage().then((value) {
                setState(() {
                  mediaInfo = value;
                });
              });
            },
            child: Text("Select Image"),
          ),
        ],
      ),
    );
  }

  Future<MediaInfo> pickImage() async {
    MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
    return mediaInfo;
  }
}

The Output