Trying to upload the image to server in the flutter using dart

Question

I am new to Flutter development. My problem is that when I try to upload the image to the server I am getting following error:

 NoSuchMethodError: The getter 'body' was called on null.
    Receiver: null
    Tried calling: body

Here is my code:

var response;
var booking_info_url='http://18.207.188.4/ruralpost/api/api.php?action=booking';
http.post(booking_info_url,body: {"userid":"3","weight":"20","quantity":"1","bimage":base64UrlEncode(await _image.readAsBytesSync())}).then(response);
{
    print("Response body: ${response.body}");
}

Have you taken my advice about [the definite article](https://www.ef.edu/english-resources/english-grammar/definite-article/) into consideration? It will help you to write more precise questions. — creativecreatorormaybenot, Jun 28 '18 at 06:42
Refer [This](https://stackoverflow.com/a/49645074/2863386) answer to know how to upload image in flutter — Shyju M, Jun 28 '18 at 06:58

Bostrot · Answer 1 · 2018-06-28T08:17:05.290

1

It means that response is null. It doesn't have a value. You could try to use a multipart request like in this post:

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

upload(File imageFile) async {    
    // to byte stream
    var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));

    // get length for http post
    var length = await imageFile.length();

    // string to uri
    var uri = Uri.parse("http://18.207.188.4/ruralpost/api/api.php?action=booking");

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

    // if you want more data in the request
    request.fields['user'] = 'user001';

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

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

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

    if (response.statusCode == "200") {
        // do something on success
    }

}

thenn call your function with

upload(yourFile);

edited Jun 28 '18 at 08:17

answered Jun 28 '18 at 07:40

Bostrot

5,767
3
37
47

how can I pass other variables – ayub baba Jun 28 '18 at 08:14
@ayubbaba I added it to the post. Basically it is this: `request.fields['user'] = 'user001';` – Bostrot Jun 28 '18 at 08:17
Use the request.fields for every var you want to add eg. `request.fields['userid'] = '3'; request.fields['weight'] = '20';` – Bostrot Jun 28 '18 at 08:46
Its not getting uploaded – ayub baba Jun 28 '18 at 09:50
You need to include more information than that. Is there an error, did you check that you actually can upload to the server? – Bostrot Jun 28 '18 at 09:52
I had checked in the server but no image is showing in there – ayub baba Jun 28 '18 at 10:10
First it is coming response code 200 and then the response code 500 – ayub baba Jun 28 '18 at 10:12
500 is an internal server error. That means you need to check wether the server is able to retrieve files uploaded by a multipart request. – Bostrot Jun 28 '18 at 10:15

score 0 · Accepted Answer · answered Jun 28 '18 at 10:17

In your code you have two different versions of response, with different scopes, which isn't what you intend. Remove the 'var response' and the ; before the body of the then.

String booking_info_url =
    'http://18.207.188.4/ruralpost/api/api.php?action=booking';
http.post(booking_info_url, body: {
  "userid": "3",
  "weight": "20",
  "quantity": "1",
  "bimage": base64UrlEncode(await _image.readAsBytesSync())
}).then((Response response) {
  print("Response body: ${response.body}");
});

Trying to upload the image to server in the flutter using dart

2 Answers2

Linked