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'] = '[email protected]';
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!");
});

Solution 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

Solution 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;

Comments

[Richard Heap]

What did you change the sample code to? What's not working?

[user3903484]

i want the user select the image in the gallery the post it to the server

[Sivaram Rasathurai]

pickImage is depreciated one

[Supun Dewapriya]

when upgrade flutter, you will have those problems. i will check and post the new code

[Md. Kamrul Amin]

Just use getImage like below instead :: final ImagePicker _picker = ImagePicker(); final PickedFile image = await _picker.getImage( source: ImageSource.camera, imageQuality: 50 )

[vin shaba]

This works well but DelegatingStream.typed is deprecated!