How to upload Multi images by http package to mysql flutter - flutter

Question

I have been searching for a long time about how to enable users to select a group of images and upload them to the database through the image_picker.I was able to find my request in the following topic:
enter link description here
And other similar topics on the site.
I tried to upload images to the database through the http package and php file. The code works and the attempt is successful, but the problem is that only one image is uploaded. How to solve this problem I need to upload all the images at once.
Code:
void main() {
runApp(
MyApp(),
);
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: '',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: PickImages(),
);
}
}
class PickImages extends StatefulWidget {
#override
_PickImagesState createState() => _PickImagesState();
}
class _PickImagesState extends State<PickImages> {
static final String uploadEndPoint = 'https://****************.php';
List<Object> images = List<Object>();
Future<File> _imageFile;
bool _isVisible = false;
String base64Image;
Future _onAddImageClick(int index, int type) async {
if (images != null)
setState(() {
// ignore: deprecated_member_use
_imageFile = ImagePicker.pickImage(
source: type == 1 ? ImageSource.camera : ImageSource.gallery,
imageQuality: 50,
);
getFileImage(index);
});
}
void getFileImage(int index) async {
_imageFile.then((file) async {
setState(() {
ImageUploadModel imageUpload = new ImageUploadModel();
imageUpload.imageFile = file;
images.replaceRange(index, index + 1, [imageUpload]);
});
});
}
void showImageBox() {
setState(() {
_isVisible = !_isVisible;
});
}
#override
void initState() {
super.initState();
setState(() {
images.add("Add Image");
images.add("Add Image");
images.add("Add Image");
images.add("Add Image");
images.add("Add Image");
images.add("Add Image");
});
}
startUpload() {
String NameImage = DateTime.now().millisecondsSinceEpoch.toString();
{
http.post(uploadEndPoint, body: {
"image": base64Image,
"NameImage": NameImage,
}).then((result) {
if (result.statusCode == 200) {
print('dddddddddddddddd ${result.statusCode}');
} else {
}
}).catchError((error) {
});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Post Images'),
),
body: Column(
children: <Widget>[
Container(
//padding: EdgeInsets.only(right: 5),
child: Card(
elevation: 5,
child: ListTile(
trailing: Icon(Icons.attachment),
title: Text('Attachments'),
onTap: () {
showImageBox();
},
),
),
),
Visibility(
visible: _isVisible,
child: Padding(
padding: const EdgeInsets.only(top: 5.0, right: 5.0),
child: GridView.count(
shrinkWrap: true,
crossAxisCount: 3,
childAspectRatio: 1,
children: List.generate(images.length, (index) {
if (images[index] is ImageUploadModel) {
ImageUploadModel uploadModel = images[index];
//base64 image
List<int> imageBytes = uploadModel.imageFile.readAsBytesSync();
// base64Image = base64Encode(snapshot.data.readAsBytesSync());
base64Image = base64Encode(imageBytes); //'base64Image' holds the base64 image string
return Card(
clipBehavior: Clip.antiAlias,
child: Stack(
children: <Widget>[
Image.file(
uploadModel.imageFile,
fit: BoxFit.cover,
width: 300,
height: 300,
),
Positioned(
right: 5,
top: 5,
child: InkWell(
child: Icon(
Icons.remove_circle,
size: 20,
color: Colors.red,
),
onTap: () {
setState(() {
images.replaceRange(
index, index + 1, ['Add Image']);
});
},
),
),
],
),
);
} else {
return Card(
child: IconButton(
icon: Icon(Icons.camera_alt),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return SafeArea(
child: Container(
child: new Wrap(
children: <Widget>[
new ListTile(
leading: new Icon(Icons.photo_camera),
title: new Text('Camera'),
onTap: () {
_onAddImageClick(index, 1);
Navigator.of(context).pop();
},
),
new ListTile(
leading:
new Icon(Icons.photo_library),
title: new Text('Gallery'),
onTap: () {
_onAddImageClick(index, 2);
Navigator.of(context).pop();
}),
],
),
),
);
},
);
},
),
);
}
}),
),
),
),
RaisedButton(
child: Text('send'),
onPressed: () {
startUpload();
},
),
],
),
);
}
}
class ImageUploadModel {
File imageFile;
ImageUploadModel({
this.imageFile,
});
}
<?php
$image = $_POST['image'];
$NameImage = $_POST['NameImage'];
include 'connt.php';
$path = "ImageCat/$NameImage.png";
$actualpath = "https://*****.com/*****/$path";
$sql = "INSERT INTO Cate (image) VALUES (?)";
$stmt = $con->prepare($sql);
$stmt->bind_param("s",$actualpath);
$stmt->execute();
$result = $stmt->get_result();
// if(mysqli_query($conn,$sql)){
file_put_contents($path,base64_decode($image));
echo "Successfully Uploaded";
// }
$stmt->close();
?>

Answer 1

You can use HTTP and MultipartFile
try {
var request = http.MultipartRequest(
"POST", Uri.parse("url"));
var photo1 = await http.MultipartFile.fromPath("photo1", _imageFile1.path);
var photo2 = await http.MultipartFile.fromPath("photo2", _imageFile2.path);
request.files.add(photo1);
request.files.add(photo2);
request.fields["additional_data"] = "data";
var response = await request.send();
response.stream.asBroadcastStream();
if (response.statusCode == 200) {
response.stream.transform(utf8.decoder).listen((value) async {
Map<String, dynamic> result = json.decode(value);
print(result);
});
} else {
print("error");
}
} catch (e) {
print(e);
}