Flutter image_picker post upload an image

Question

I am using the Flutter Plugin Image_picker to choose images so that I want to upload image after selected the image

Future<File> _imageFile;

  void _onImageButtonPressed(ImageSource source) async {
    setState(() {
      _imageFile = ImagePicker.pickImage(source: source);
    });
  }

I find this code in flutter documentation but its not work

var uri = Uri.parse("http://pub.dartlang.org/packages/create");
var request = new http.MultipartRequest("POST", url);
request.fields['user'] = 'nweiz@google.com';
request.files.add(new http.MultipartFile.fromFile(
    'package',
    new File('build/package.tar.gz'),
    contentType: new MediaType('application', 'x-tar'));
request.send().then((response) {
  if (response.statusCode == 200) print("Uploaded!");
});

Answer 1

Use MultipartRequest class

Upload(File imageFile) async {    
    var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
      var length = await imageFile.length();

      var uri = Uri.parse(uploadURL);

     var request = new http.MultipartRequest("POST", uri);
      var multipartFile = new http.MultipartFile('file', stream, length,
          filename: basename(imageFile.path));
          //contentType: new MediaType('image', 'png'));

      request.files.add(multipartFile);
      var response = await request.send();
      print(response.statusCode);
      response.stream.transform(utf8.decoder).listen((value) {
        print(value);
      });
    }

Check this answer

Answer 2

This code works properly. Used MultipartRequest class

  void uploadImage() async {

      File _image;
      File pickedImage = await ImagePicker.pickImage(source: ImageSource.camera);

      setState(() {
        _image = pickedImage;
      });


    // open a byteStream
    var stream = new http.ByteStream(DelegatingStream.typed(_image.openRead()));
    // get file length
    var length = await _image.length();

    // string to uri
    var uri = Uri.parse("enter here upload URL");

    // create multipart request
    var request = new http.MultipartRequest("POST", uri);

    // if you need more parameters to parse, add those like this. i added "user_id". here this "user_id" is a key of the API request
    request.fields["user_id"] = "text";

    // multipart that takes file.. here this "image_file" is a key of the API request
    var multipartFile = new http.MultipartFile('image_file', stream, length, filename: basename(_image.path));

    // add file to multipart
    request.files.add(multipartFile);

    // send request to upload image
    await request.send().then((response) async {
      // listen for response
      response.stream.transform(utf8.decoder).listen((value) {
        print(value);
      });

    }).catchError((e) {
      print(e);
    });
  }

name spaces:

  import 'package:path/path.dart';
  import 'package:async/async.dart';
  import 'dart:io';
  import 'package:http/http.dart' as http;

Answer 3

It was depreciated, Now We can use getImage method to upload the image

void uploadImage() async {
  final picker = ImagePicker();
  File _imageFile;
  final pickedFile = await picker.getImage(source:ImageSource.gallery);
  setState(() {
      _imageFile = File(pickedFile.path);
    });

Answer 4

If you want the uploading function to return the server response, you can use toBytes() instead of transform() , in order to wait until data transmission is complete.

Future<String> upload() async {

  String responseString = '';

  // Pick image
  final image = await ImagePicker().getImage(
    source: ImageSource.gallery // or ImageSource.camera
    imageQuality: 100,
    maxWidth: 1000,
  );

  // Convert to File
  final file = File(image.path);
  // Set URI
  final uri = Uri.parse('URL');
  // Set the name of file parameter
  final parameter = 'Name';

  // Upload
  final request = http.MultipartRequest('POST', uri)
    ..files.add(await http.MultipartFile.fromPath(parameter, file.path));
  final response = await request.send();
  if (response.statusCode == 200) {
    responseString = String.fromCharCodes(await response.stream.toBytes());
  }

return responseString;
}