In Flutter How to get image path after selecting images using Multi Image Picker?
Solution 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);
}
},
),
)
Solution 2
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);
}
},
),
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.
Solution 3
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");
}
}
Solution 4
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,
),
);
}
),
Related videos on Youtube
Jonh
Updated on July 20, 2022Comments
-
Jonh almost 2 years
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 memulti_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, ); }), ); } }
-
pskinkhow do you upload your data? using
http
package? ordio
? or anything else? -
pskinkyou want to check the links i posted
-
-
Zaza.codes almost 3 yearsdid this but i got an error which says
E/flutter (16058): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: Bad state: Can't finalize a finalized MultipartFile.
, i followed through on exactly what you did,please lhelp -
Mohankumar Shan almost 3 yearsplease check the library version. because this version is old, may be version problem.