dartflutterflutter-web

How to Pick files and Images for upload with flutter web


I would like to know how to pick an Image from the users computer into my flutter web app for upload


Solution

  • 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.