How to return the data in MultipartRequest in flutter

Question

I am uploading the image through rest API I uploaded the image Successfully. I want to get back the data after post request is sent. I also need to show progress indicator while the image is uploading. How can i retrieve the value I try to get it with future Builder but did not get any value.-------------------------------------------------------

import 'package:path/path.dart';
import 'package:async/async.dart';
import 'dart:io';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

upload(File imageFile) async {
  // open a bytestream
  var stream = new http.ByteStream(DelegatingStream(imageFile.openRead()));
  // get file length
  var length = await imageFile.length();

  // string to uri
  var uri = Uri.parse("http://192.168.43.76/soledesign/wp-json/wp/v2/media");

  // 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);

  //multipart that take headers
  Map<String, String> headers = {
    "Authorization":
        "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC8xOTIuMTY4LjQzLjc2XC9zb2xlZGVzaWduIiwiaWF0IjoxNTg5Nzg0MDE2LCJuYmYiOjE1ODk3ODQwMTYsImV4cCI6MTU5MDM4ODgxNiwiZGF0YSI6eyJ1c2VyIjp7ImlkIjoiMTAzIn19fQ.ST-Ts_GnziJLJEIRLHvnZMW3xcs7f5ARk0ZeKTvMyFo",
    "Content-Disposition": "attachment;filename=1.png",
    "Content-Type": "image/png"
  };

  // add header to multipart
  request.headers.addAll(headers);

  // send
  var response = await request.send();
  print(response.statusCode);

  // listen for response
  response.stream.transform(utf8.decoder).listen((value) {
    print(value);

  });
}

class PickImgGallery extends StatefulWidget {
  @override
  _PickImgGalleryState createState() => _PickImgGalleryState();
}

class _PickImgGalleryState extends State<PickImgGallery> {
  File _image;

  Future getImage() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Builder(builder: (context) {
        return Column(
          children: <Widget>[
            Center(
              child: _image == null
                  ? Text('No image selected.')
                  : Image.file(_image),
            ),
            RaisedButton(
              onPressed: () {
                upload(_image);

                Scaffold.of(context)
                    .showSnackBar(SnackBar(content: Text('Uploading')));
              },
              child: Text('Image Upload'),
            ),


          ],
        );
      }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {

          getImage();
        },
        tooltip: 'Pick Image',
        child: Icon(Icons.add_a_photo),
      ),
    );
  }
}

Solution

To receive data after a MultipartRequest, rather than this

  // send
  var response = await request.send();
  print(response.statusCode);

  // listen for response
  response.stream.transform(utf8.decoder).listen((value) {
    print(value);

  });

try this:

  http.Response response = await http.Response.fromStream(await request.send());
  print("Result: ${response.statusCode}");
  return response.body;

Comments

[jaredbaszler]

Welcome to SO @idrissdimson - thanks for helping me out today. You saved me some hours for sure!

[Sachin Tanpure]

Great Solution. +1 for receiving response in http.Response. Thanks