How to send an image to an api in dart/flutter? How to send an image to an api in dart/flutter? dart dart

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.