How to Pick files and Images for upload with flutter web

I tried the code below and it worked.

first import 'dart:html';

// variable to hold image to be displayed       Uint8List uploadedImage;//method to load image and update `uploadedImage`    _startFilePicker() async {    InputElement uploadInput = FileUploadInputElement();    uploadInput.click();    uploadInput.onChange.listen((e) {      // read file content as dataURL      final files = uploadInput.files;      if (files.length == 1) {        final file = files[0];        FileReader reader =  FileReader();        reader.onLoadEnd.listen((e) {                    setState(() {                      uploadedImage = reader.result;                    });        });        reader.onError.listen((fileEvent) {          setState(() {            option1Text = "Some Error occured while reading the file";          });        });        reader.readAsArrayBuffer(file);      }    });    }

now just any Widget, like a button and call the method _startFilePicker()

The accepted answer is outdated, and using dart:html package directly in Flutter is not recommended.

Instead, use this package: https://pub.dev/packages/file_picker.

Example of how to use in Flutter Web:

class FileUploadButton extends StatelessWidget {  @override  Widget build(BuildContext context) {    return RaisedButton(      child: Text('UPLOAD FILE'),      onPressed: () async {        var picked = await FilePicker.platform.pickFiles();        if (picked != null) {          print(picked.files.first.name);        }      },    );  }}

Note that FilePickerResult.path is not supported in Flutter Web.

import 'package:http/http.dart' as http;import 'package:file_picker/file_picker.dart';import 'package:flutter/material.dart';class FileUploadWithHttp extends StatefulWidget {  @override  _FileUploadWithHttpState createState() => _FileUploadWithHttpState();}class _FileUploadWithHttpState extends State<FileUploadWithHttp> {  PlatformFile objFile = null;  void chooseFileUsingFilePicker() async {    //-----pick file by file picker,    var result = await FilePicker.platform.pickFiles(      withReadStream:          true, // this will return PlatformFile object with read stream    );    if (result != null) {      setState(() {        objFile = result.files.single;      });    }  }  void uploadSelectedFile() async {    //---Create http package multipart request object    final request = http.MultipartRequest(      "POST",      Uri.parse("Your API URL"),    );    //-----add other fields if needed    request.fields["id"] = "abc";    //-----add selected file with request    request.files.add(new http.MultipartFile(        "Your parameter name on server side", objFile.readStream, objFile.size,        filename: objFile.name));    //-------Send request    var resp = await request.send();    //------Read response    String result = await resp.stream.bytesToString();    //-------Your response    print(result);  }  @override  Widget build(BuildContext context) {    return Container(      child: Column(        children: [          //------Button to choose file using file picker plugin          RaisedButton(              child: Text("Choose File"),              onPressed: () => chooseFileUsingFilePicker()),          //------Show file name when file is selected          if (objFile != null) Text("File name : ${objFile.name}"),          //------Show file size when file is selected          if (objFile != null) Text("File size : ${objFile.size} bytes"),          //------Show upload utton when file is selected          RaisedButton(              child: Text("Upload"), onPressed: () => uploadSelectedFile()),        ],      ),    );  }}