Flutter PUT HTTP request from file

Question

Need some help troubleshooting an HTTP request in Flutter using the PUT method sending an image file on the body to a NextCloud server via API.

As always, i tested sending the request via POSTMAN to see what's happening. It worked ok selecting "binary" in the body tab and selecting the image file.

The file is there as intended:

Moving to implement this on the Flutter app I'm using the code below:

_imageFile = Contains the image from camera or gallery.

RaisedButton(
  color: Colors.blueAccent,
  child: Text('enviar'),
  onPressed: () async {
    String base64Image = base64Encode(_imageFile.readAsBytesSync());
    print(base64Image);
    var client = http.Client();
    var request = http.Request(
        'PUT', Uri.parse('https://host123.com.br/remote.php/dav/files/82427565709/TOOP.jpeg'));
    request.headers.addAll(
        {HttpHeaders.authorizationHeader: 'Basic ODI0Mjc1NjU3MDk6Y2xlYW5uZXQ=', 'Content-Type': 'image/jpeg'});
    request.body = base64Image;
var streamedResponse = await client.send(request);
    client.close();
    print('ok!');
  },
),

The result on terminal:

I/flutter ( 8349): /9j/4AAQSkZJRgABAQEASABIAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAWFlaIAAAAAAAAPNRAAEAAAABFsxYWVogAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z2Rlc2MAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAFklFQyBodHRwOi8vd3d3LmllYy5jaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABkZXNjAAAAAAAAAC5JRUMgNjE5NjY
I/flutter ( 8349): ok

The result on the Nextcloud server sending via APP:

Looks like there is something wrong with the encoding or the data that's being sent on the body. The file get "corrupted"

It is the same file on both tests.

** UPDATE **

After changing the body data to just the bytes, as suggested, without base64encoding. (Image Below)

Tried convert using .toString() method too, the file went to the server but stayed the same as before, looking corrupted.

Why would you base 64 encode the body before sending it? Just send the bytes. — Richard Heap
– Richard Heap, Commented Oct 23, 2019 at 19:45
Hi @RichardHeap, changed the code as follows, but the "request.body" is expecting String datatype. Adding image to the original post. — Gabrielhn
– Gabrielhn, Commented Oct 23, 2019 at 19:55

Richard Heap · Accepted Answer · 2019-10-24 01:08:57Z

4

There's no need to construct your own request, as the http package has a convenience put method. This method (and the more common post one) take an optional body parameter, which is a dynamic. If you pass bytes, these are sent verbatim. If you pass a string, it's encoded to bytes and sent. You can also pass a map of string to string which will be form encoded.

Your code can we simplified to:

  var uri = Uri.parse(
      'https://host123.com.br/remote.php/dav/files/82427565709/Lowppp.jpeg');
  var response = await http.put(
    uri,
    headers: {
      HttpHeaders.authorizationHeader: 'Basic xxxxxxx', // insert correct credentials here
      'Content-Type': 'image/jpeg',
    },
    body: await _imageFile.readAsBytes(),
  );
  print(response.statusCode);

answered Oct 24, 2019 at 1:08

Richard Heap

52.1k11 gold badges143 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gabrielhn · Accepted Answer · 2019-10-24 00:55:18Z

@RichardHeap helped to find the solution. It's needed to send the body as bytes, without converting and adding to the request as bodyBytes request.bodyBytes = imageBytes;

Full code working:

List<int> imageBytes = _imageFile.readAsBytesSync();
    var client = http.Client();
    var request = http.Request('PUT', Uri.parse('https://host123.com.br/remote.php/dav/files/82427565709/Lowppp.jpeg'));
    request.headers.addAll({HttpHeaders.authorizationHeader: 'Basic ODI0Mjc1NjU3MDk6Y2xlYW5uZXQ=', 'Content-Type': 'image/jpeg'});
    request.bodyBytes = imageBytes;
    var streamedResponse = await client.send(request).then((res) {
      print(res.statusCode);
    }).catchError((err) {
      print(err);
    });
    client.close();

Collectives™ on Stack Overflow

Flutter PUT HTTP request from file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related