skip to Main Content

I want to get an image path from selected multiple images, I’m using this link to select multiple images but I got assets, I want paths from selected multiple images because I want to upload into the API.
I added this dependency in pubspec.yaml If there any good way to do this, please tell me

multi_image_picker: ^4.6.3

This is my file upload class, This UI looks similar to Facebook.

import 'dart:typed_data';
import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:multi_image_picker/multi_image_picker.dart';

class UpdateStatus extends StatefulWidget {
  @override
  _UpdateStatusState createState() => _UpdateStatusState();
}

class _UpdateStatusState extends State<UpdateStatus> {
  List<Asset> images = List<Asset>();
  String _error = 'No Error Dectected';

  Future<ByteData> byteData;
 // List<int> imageData = byteData.buffer.asUint8List();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Create Post'),
        actions: <Widget>[
          Padding(
            padding: const EdgeInsets.all(18.0),
            child: InkWell(child: Text('POST',style: TextStyle(fontSize: 18.0),),onTap: ()
              {
                print('Post this post');
              },),
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Container(
          height: MediaQuery.of(context).size.height,
          width:MediaQuery.of(context).size.width ,
          color: Colors.white,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                height: 300.0,
                color: Colors.white,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    keyboardType: TextInputType.multiline,
                    maxLines: 100,
                      style: new TextStyle(
                          fontSize: 18.0,
                          color: Colors.black
                      ),
                    decoration: InputDecoration(
                      hintText: 'Enter your Post Details Here !',
                      border: InputBorder.none,
                    ),
                  ),
                ),
              ),
              Divider(
                thickness: 1.0,
              ),
              Column(
                children: <Widget>[
                  Container(
                    height: 40.0,
                    color: Colors.white70,
                    child: Padding(
                      padding:EdgeInsets.only(left: 18.0,),
                      child: InkWell(
                        child: Row(
                          children: <Widget>[
                            Icon(Icons.add_a_photo,),
                            Text("  Choose Image",style: TextStyle(fontSize: 24.0,),),
                          ],
                        ),
                        onTap: ()
                        {
                          print(images.toList().toString());
                          print('choose image from local');
                        },
                      ),
                    ),
                  ),
                  Divider(
                    thickness: 1.0,
                  ),
                  Container(
                    height: 40.0,
                    color: Colors.white70,
                    child: Padding(
                      padding:EdgeInsets.only(left: 18.0,),
                      child: InkWell(
                        child: Row(
                          children: <Widget>[
                            Icon(Icons.add_photo_alternate,),
                            Text("  Choose Video",style: TextStyle(fontSize: 24.0,),),
                          ],
                        ),
                        onTap: ()
                        {
                          print('choose video from local');
                        },
                      ),
                    ),
                  ),
                ],
              ),
              Divider(
                thickness: 1.0,
              ),
         Container(
           height: 200,
              child: Column(
                children: <Widget>[
                  Center(child: Text('Error: $_error')),
                  RaisedButton(
                    child: Text("Pick images"),
                    onPressed: loadAssets,
                  ),
                  Expanded(
                    child: buildGridView(),
                  )
                ],
              ),
         ),
         /*
          Column(
            children: <Widget>[
              Center(child: Text('Error: $_error')),
              RaisedButton(
                child: Text("Pick images"),
                onPressed: loadAssets,
              ),
              Expanded(
                child: buildGridView(),
              )
            ],
          ),

              */
            ],
          ),
        ),
      ),
    );
  }

  Future<void> loadAssets() async {

    List<Asset> resultList = List<Asset>();
    String error = 'No Error Dectected';

    ByteData byteData;


    try {
      resultList = await MultiImagePicker.pickImages(
        maxImages: 300,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "Ilma",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );

    } on Exception catch (e) {
      error = e.toString();
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;

    setState(() {
      images = resultList;
      _error = error;
      print('000000000000000000000');
      print('000000000000000000000');
      print(images);
      print('000000000000000000000');
      print('000000000000000000000');
    });



  }

  Widget buildGridView() {
    return GridView.count(
      crossAxisCount: 3,
      children: List.generate(images.length, (index) {
        Asset asset = images[index];

        byteData=asset.getByteData();

        print('0000');
        print(byteData);
        print('0000');



        return AssetThumb(
          asset: asset,
          width: 300,
          height: 300,
        );
      }),
    );
  }

}

4

Answers


  1. Padding(
                padding: const EdgeInsets.all(18.0),
                child: InkWell(
                  child: Text(
                    'POST',
                    style: TextStyle(fontSize: 18.0),
                  ),
                  onTap: () async {
    
     List<MultipartFile> multipart = List<MultipartFile>();
    
                    for (int i = 0; i < images.length; i++) {
                      var path = await FlutterAbsolutePath.getAbsolutePath(images[i].identifier);
    
                    }   
    
                  },
                ),
              )
    
    Login or Signup to reply.
  2. You can also select multiple images using file_picker: ^1.5.0+2 library and easy to get path of selected images

    Future<int> getFilePath() async {
    try {
      files = await FilePicker.getMultiFile();
      if (files == '') {
        return 0;
      }
      else
      {
        setState(() {
          this._filePath = files;
          return 1;
        });
      }
    
    } on PlatformException catch (e) {
      print("Error while picking the file: " + e.toString());
    }
    

    }

    show selected images by using ListView Builder like this

                   ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: _filePath.length,
                  itemBuilder: (context,c)
                  {
    
                    return Card(
                      child: Image.file(_filePath[c],
                        fit: BoxFit.fill,
                        width: 400,
                        height: 400,
    
                      ),
                    );
                  }
              ),
    
    Login or Signup to reply.
  3. I’m Using below Code to select multiple images by using file_picker: ^2.0.7 Library.
    Long press to select multiple image. Once Image Selected you can use f arr to display the images.

    List<File> f = List();
    
     RaisedButton(
                child: Text("Pick Image"),
                onPressed: () async {
                  FilePickerResult result = await FilePicker.platform.pickFiles(
                    allowMultiple: true,
                    type: FileType.custom,
                    allowedExtensions: ['jpg', 'png', 'jpeg'],
                  );
                  if (result != null) {
                    f = result.paths.map((path) => File(path)).toList();
                    setState(() {});
                    print(f);
                  }
                },
              ),

    enter image description here

    Sample API Call For image upload and normal data. Image uploaded column should be arr ( photo[] ).

     List<MultipartFile> newList = new List<MultipartFile>();
    
    
    Future<String> ImageUpload() async {
    
    var request = http.MultipartRequest('POST', url);
     request.headers["Authorization"] = pref.getString("token");
        request.headers["Accept"] = "application/json";
       //Image Data
      for (int i = 0; i < f.length; i++) {
          newList.add(await http.MultipartFile.fromPath('photo[]', f[i].path));
        }
        request.files.addAll(newList);
        
        Map<String, dynamic> data = Map<String, String>();
        //normal data
        data["user_id"] = user_id;
        data["project_id"] = pro_id;
        
        request.fields.addAll(data);
        var res = await request.send();
        
        if (res.statusCode == 200) {
          debugPrint("Status${res}");
          }else {
          debugPrint("status code${res}");
          }
          
        }
        
    Try This You can select and upload multiple images easily. Thank you.
    
    Login or Signup to reply.
  4. Use multi_image_picker 4.7.14 library to pick Multiple Images. use below code you can send selected asset image as a file. `

    //Inside Widget Builder
    FlatButton(
                child: Image.asset(
                  "assets/images/camera.png",
                  color: Colors.grey,
                ),
                onPressed: loadAssets,
              ),
              
        SizedBox(
                      // height: SizeConfig.safeBlockHorizontal * 10,
                      height: MediaQuery.of(context).size.height / 2,
                      child: Column(
                        children: <Widget>[
                          Expanded(
                            child: buildGridView(),
                          ),
                        ],
                      ),
                    )
    List<File> fileImageArray = [];
      List<String> f = List();
      List<Asset> resultList = List<Asset>();
      List<Asset> images = List<Asset>();
      
      Future<void> loadAssets() async {
        try {
          resultList = await MultiImagePicker.pickImages(
            maxImages: 4,
            enableCamera: true,
            selectedAssets: images,
            cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
            materialOptions: MaterialOptions(
              actionBarColor: "#abcdef",
              actionBarTitle: "Example App",
              allViewTitle: "All Photos",
              useDetailsView: false,
              selectCircleStrokeColor: "#000000",
            ),
          );
        } on Exception catch (e) {
          error = e.toString();
        }
    
        if (!mounted) return;
    
        for (int i = 0; i < resultList.length; i++) {
          var path =
              await FlutterAbsolutePath.getAbsolutePath(resultList[i].identifier);
          print(path);
          f.add(File(path));
        }
    
        setState(() {
          images = resultList;
        });
    
        // return fileImageArray;
      }
    
    //image PreView
      Widget buildGridView() {
        return GridView.count(
          crossAxisCount: 4,
          children: List.generate(images.length, (index) {
            Asset asset = images[index];
            return AssetThumb(
              asset: asset,
              width: 50,
              height: 50,
            );
          }),
        );
      }

    API Call : while image uploading place use multipart file

    List<MultipartFile> newList = new List<MultipartFile>();
        
      Future<String> multiImagePostAPI() async {
        var request = http.MultipartRequest('POST', url);
        request.headers["Authorization"] = pref.getString("token");
        request.headers["Accept"] = "application/json";
        
         for (int i = 0; i < f.length; i++) {
          newList.add(await http.MultipartFile.fromPath('photo[]', f[i].path));
        }
        request.files.addAll(newList);
         Map<String, dynamic> data = Map<String, String>();
          data["user_id"] = user_id;
          data["project_id"] = pro_id;
          data["title"] = titleController.text;
    
          request.fields.addAll(data);
    
          var res = await request.send();
         
         if (res.statusCode == 200) {
          debugPrint("Status$res");
         }else {
          debugPrint("status : $res");
          }
          
         
         }
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search