How to send an image to an api in dart/flutter?
The simplest method would be to post a multipart request like in this post and then post it to the server.
Make sure to import these in the beginning of the file:
import 'package:path/path.dart';import 'package:async/async.dart';import 'dart:io';import 'package:http/http.dart' as http;import 'dart:convert';
Add this class somewhere in your code:
upload(File imageFile) async { // open a bytestream var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead())); // get file length var length = await imageFile.length(); // string to uri var uri = Uri.parse("http://ip:8082/composer/predict"); // create multipart request var request = new http.MultipartRequest("POST", uri); // multipart that takes file var multipartFile = new http.MultipartFile('file', stream, length, filename: basename(imageFile.path)); // add file to multipart request.files.add(multipartFile); // send var response = await request.send(); print(response.statusCode); // listen for response response.stream.transform(utf8.decoder).listen((value) { print(value); }); }
Then upload using:
upload(File(filePath));
In your code:
void onTakePictureButtonPressed() { takePicture().then((String filePath) { if (mounted) { setState(() { imagePath = filePath; videoController?.dispose(); videoController = null; }); // initiate file upload Upload(File(filePath)); if (filePath != null) showInSnackBar('Picture saved to $filePath'); } }); }
import 'package:dio/dio.dart'; //From 3.x.x version uploadImage(){ var formData = FormData(); formData.files.add(MapEntry("Picture", await MultipartFile.fromFile(data.foto.path, filename: "pic-name.png"), )); var response = await dio.client.post('v1/post', data: formdata); }
If you are sending the image to PHP Laravel Server. Try reducing the size of the image
while sending it to the server. I used Image Picker package to reduce the size of the image.
var image = await ImagePicker.pickImage(source: imageSource, imageQuality: 50, maxHeight: 500.0, maxWidth: 500.0);
Then create a multipart file with that image, add it to form data, and send the form data to the server using post request with dio
library. See @Elialber Lopes
answer for sending the data.
It worked for me.