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!");
});

i want the user select the image in the gallery the post it to the server — user3903484, May 06 '18 at 11:53

score 6 · Accepted Answer · answered May 07 '18 at 05:38

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

score 4 · Answer 2 · answered May 20 '20 at 23:16

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;

when upgrade flutter, you will have those problems. i will check and post the new code — Supun Dewapriya, Nov 29 '20 at 18:22
Just use getImage like below instead :: final ImagePicker _picker = ImagePicker(); final PickedFile image = await _picker.getImage( source: ImageSource.camera, imageQuality: 50 ) — Md. Kamrul Amin, Feb 17 '21 at 06:50

score 0 · Answer 3 · answered Jun 04 '21 at 13:26

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

Flutter image_picker post upload an image

3 Answers3

Linked