title: Replace image_picker functionality with file_picker to pick multiple images
body: <p><a href="https://i.stack.imgur.com/IyotJ.png" rel="nofollow noreferrer">app</a></p>
  <p>I have a simple flutter app that lets the user select a single image and upload it to firebase storage and then show it on the home screen of the app. Right now <em><a href="https://pub.dev/packages/image_picker/example" rel="nofollow noreferrer">image_picker</a></em> has been used in this app which lets it pick one image at a time. But I want to use <em><a href="https://pub.dev/packages/file_picker" rel="nofollow noreferrer">file_picker</a></em> plugin to pick multiple images at once and upload them on the firebase storage.</p>
  <p>I think the right way to do this would be to store the path of images in a list while selecting and then upload it. However, I have tried it multiple times but I am not able to make that work!
  Any help is warmly welcomed!</p>
  <pre><code>import 'package:firebase_core/firebase_core.dart';
  import 'package:firebase_storage/firebase_storage.dart';
  import 'package:path/path.dart' as path;
  import 'package:image_picker/image_picker.dart';
  
  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
  
    // Initialize a new Firebase App instance
    await Firebase.initializeApp();
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Kindacode.com',
        theme: ThemeData(primarySwatch: Colors.green),
        home: HomePage(),
      );
    }
  }
  
  class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() =&gt; _HomePageState();
  }
  
  class _HomePageState extends State&lt;HomePage&gt; {
    FirebaseStorage storage = FirebaseStorage.instance;
  
    // Select and image from the gallery or take a picture with the camera
    // Then upload to Firebase Storage
    Future&lt;void&gt; _upload(String inputSource) async {
      final picker = ImagePicker();
      PickedFile? pickedImage;
      try {
        pickedImage = await picker.getImage(
            source: inputSource == 'camera'
                ? ImageSource.camera
                : ImageSource.gallery,
            maxWidth: 1920);
  
        final String fileName = path.basename(pickedImage!.path);
        File imageFile = File(pickedImage.path);
  
        try {
          // Uploading the selected image with some custom meta data
          await storage.ref(fileName).putFile(
              imageFile,
              SettableMetadata(customMetadata: {
                'uploaded_by': 'A bad guy',
                'description': 'Some description...'
              }));
  
          // Refresh the UI
          setState(() {});
        } on FirebaseException catch (error) {
          print(error);
        }
      } catch (err) {
        print(err);
      }
    }
  
    // Retriew the uploaded images
    // This function is called when the app launches for the first time or when an image is uploaded or deleted
    Future&lt;List&lt;Map&lt;String, dynamic&gt;&gt;&gt; _loadImages() async {
      List&lt;Map&lt;String, dynamic&gt;&gt; files = [];
  
      final ListResult result = await storage.ref().list();
      final List&lt;Reference&gt; allFiles = result.items;
  
      await Future.forEach&lt;Reference&gt;(allFiles, (file) async {
        final String fileUrl = await file.getDownloadURL();
        final FullMetadata fileMeta = await file.getMetadata();
        files.add({
          &quot;url&quot;: fileUrl,
          &quot;path&quot;: file.fullPath,
          &quot;uploaded_by&quot;: fileMeta.customMetadata?['uploaded_by'] ?? 'Nobody',
          &quot;description&quot;:
              fileMeta.customMetadata?['description'] ?? 'No description'
        });
      });
  
      return files;
    }
  
    // Delete the selected image
    // This function is called when a trash icon is pressed
    Future&lt;void&gt; _delete(String ref) async {
      await storage.ref(ref).delete();
      // Rebuild the UI
      setState(() {});
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ElevatedButton.icon(
                      onPressed: () =&gt; _upload('camera'),
                      icon: Icon(Icons.camera),
                      label: Text('camera')),
                  ElevatedButton.icon(
                      onPressed: () =&gt; _upload('gallery'),
                      icon: Icon(Icons.library_add),
                      label: Text('Gallery')),
                ],
              ),
              Expanded(
                child: FutureBuilder(
                  future: _loadImages(),
                  builder: (context,
                      AsyncSnapshot&lt;List&lt;Map&lt;String, dynamic&gt;&gt;&gt; snapshot) {
                    if (snapshot.connectionState == ConnectionState.done) {
                      return ListView.builder(
                        itemCount: snapshot.data?.length ?? 0,
                        itemBuilder: (context, index) {
                          final Map&lt;String, dynamic&gt; image =
                              snapshot.data![index];
  
                          return Card(
                            margin: EdgeInsets.symmetric(vertical: 10),
                            child: ListTile(
                              dense: false,
                              leading: Image.network(image['url']),
                              title: Text(image['uploaded_by']),
                              subtitle: Text(image['description']),
                              trailing: IconButton(
                                onPressed: () =&gt; _delete(image['path']),
                                icon: Icon(
                                  Icons.delete,
                                  color: Colors.red,
                                ),
                              ),
                            ),
                          );
                        },
                      );
                    }
  
                    return Center(
                      child: CircularProgressIndicator(),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>