How to get the string form of MultipartRequest that has file in it in Flutter

Question

So i got a test to make a Flutter app that sent requests to a rest API. But the api requires a signature that is generated by combining path + request body + timestamp + token then encrypt it with HMAC-Sha256 and then base64-encoded it.

The problem is there is one POST endpoint that needs a file. But, there is no clear way how to get the raw string of the MultipartRequest.

I tried to use the await request.finalize().toBytes() and then wrapped it in utf.decode(), i got and error FormatException: invalid utf-8.

And also I have tried to used FormData class from dio package. Still unclear how to get the raw string that being sent if it has file in it.

I tried the same thing i did which is use functions that is equivalent to get the bytes and utf8.decode it. Still go the same error.

So does anyone know how to get the raw string by MultipartRequest, FormData or by any class that can send file over http?

Edit 08-12-2023:

Since people are requested to add the spec of the payload to generate the signature, here they are:

The payload consists of a path, verb, token, timestamp, and request body.

Example: path=/ping&verb=GET&token=Bearer R04XSUbnm1GXNmDiXx9ysWMpFWBr×&timestamp=2019-01-02T13:14:15.678Z&body=

Detail every element of the payload:

1. Path

The value in the path is the URL after the hostname, port, and /api (if any) without Query Parameters. example: from {URL}/api/ping?version=1

becomes /ping

2. Verb

is HTTP methods that are in uppercase.

example:
GET, POST, PUT, PATCH, and DELETE.

3. Token

The token that is used for the Authorization header. (starts with 'Bearer').

example:
Bearer R04XSUbnm1GXNmDiXx9ysWMpFWBr

Note: Don't forget to add the Bearer before the Token

4. Timestamp

Timestamp when you call the API. The Timestamp format must follow the ISO8601 format (yyyy-MM-ddTHH:mm:ss.SSSZ) and must be in zero UTC offset.

example:
2022-11-11T07:13:06.648Z

Note: Timestamp must be in UTC or GMT +0 timezone format.

5. body

Request body sent for API Call.

Example: 
&body={"hello":"world"} If there is no request body, such as a GET hit, then leave blank. &body=

Note: Be aware that you must enter the exact body you sent. Because differences in letters, spaces, and lines can cause differences in the signature.

Answer 1

It's actually really easy to get the body of a multipart request, using the same code that the real multipart request does. (See http's multipart_request.dart.)

Unfortunately, you need to copy some boilerplate into your own code:

class DummyRequest {
  late final String contentType;

  /// The form fields to send for this request.
  final fields = <String, String>{};

  /// The list of files to upload for this request.
  final files = <http.MultipartFile>[];

  Future<Uint8List> finalize() async {
    final boundary = _boundaryString();
    contentType = 'multipart/form-data; boundary=$boundary';
    final stream = _finalize(boundary);
    final bb = BytesBuilder();
    for (final b in await stream.toList()) {
      bb.add(b);
    }
    return bb.toBytes();
  }

  Stream<List<int>> _finalize(String boundary) async* {
    const line = [13, 10]; // \r\n
    final separator = utf8.encode('--$boundary\r\n');
    final close = utf8.encode('--$boundary--\r\n');

    for (var field in fields.entries) {
      yield separator;
      yield utf8.encode(_headerForField(field.key, field.value));
      yield utf8.encode(field.value);
      yield line;
    }

    for (final file in files) {
      yield separator;
      yield utf8.encode(_headerForFile(file));
      yield* file.finalize();
      yield line;
    }
    yield close;
  }

  /// Returns the header string for a field.
  ///
  /// The return value is guaranteed to contain only ASCII characters.
  String _headerForField(String name, String value) {
    var header =
        'content-disposition: form-data; name="${_browserEncode(name)}"';
    if (!isPlainAscii(value)) {
      header = '$header\r\n'
          'content-type: text/plain; charset=utf-8\r\n'
          'content-transfer-encoding: binary';
    }
    return '$header\r\n\r\n';
  }

  /// Returns the header string for a file.
  ///
  /// The return value is guaranteed to contain only ASCII characters.
  String _headerForFile(http.MultipartFile file) {
    var header = 'content-type: ${file.contentType}\r\n'
        'content-disposition: form-data; name="${_browserEncode(file.field)}"';

    if (file.filename != null) {
      header = '$header; filename="${_browserEncode(file.filename!)}"';
    }
    return '$header\r\n\r\n';
  }

  /// Encode [value] in the same way browsers do.
  String _browserEncode(String value) =>
      // http://tools.ietf.org/html/rfc2388 mandates some complex encodings for
// field names and file names, but in practice user agents seem not to
// follow this at all. Instead, they URL-encode `\r`, `\n`, and `\r\n` as
// `\r\n`; URL-encode `"`; and do nothing else (even for `%` or non-ASCII
// characters). We follow their behavior.
      value.replaceAll(_newlineRegExp, '%0D%0A').replaceAll('"', '%22');

  /// Returns a randomly-generated multipart boundary string
  String _boundaryString() {
    var prefix = 'dart-http-boundary-';
    var list = List<int>.generate(
        _boundaryLength - prefix.length,
        (index) =>
            boundaryCharacters[_random.nextInt(boundaryCharacters.length)],
        growable: false);
    return '$prefix${String.fromCharCodes(list)}';
  }

  static const int _boundaryLength = 70;
  static final Random _random = Random();
}

/// A regular expression that matches strings that are composed entirely of
/// ASCII-compatible characters.
final _asciiOnly = RegExp(r'^[\x00-\x7F]+$');

/// Returns whether [string] is composed entirely of ASCII-compatible
/// characters.
bool isPlainAscii(String string) => _asciiOnly.hasMatch(string);

final _newlineRegExp = RegExp(r'\r\n|\r|\n');

const List<int> boundaryCharacters = <int>[
  43,
  95,
  45,
  46,
  48,
  49,
  50,
  51,
  52,
  53,
  54,
  55,
  56,
  57,
  65,
  66,
  67,
  68,
  69,
  70,
  71,
  72,
  73,
  74,
  75,
  76,
  77,
  78,
  79,
  80,
  81,
  82,
  83,
  84,
  85,
  86,
  87,
  88,
  89,
  90,
  97,
  98,
  99,
  100,
  101,
  102,
  103,
  104,
  105,
  106,
  107,
  108,
  109,
  110,
  111,
  112,
  113,
  114,
  115,
  116,
  117,
  118,
  119,
  120,
  121,
  122
];

Which you now use like this:

  final rq = DummyRequest()
    ..fields['foo'] = 'bar'
    ..files.add(http.MultipartFile.fromBytes('someFile', Uint8List(10)));

  final bytes = await rq.finalize();
  final contentType = rq.contentType;

Hold onto those bytes and content type. Use the bytes in your hash and the bytes and content type in your actual request. You must set the content type of your actual request with:

headers['content-type'] = contentType;

as that has the randomly generated boundary chars saved in it.

However - and this is a big one - the bytes will contain binary, non-printable chars if the file(s) you include are not just all ascii.

You didn't include all of the spec in your edited question. You are meant to minify and hash the body as follows:

The body when sending an API request. Lowercase(HexEncode(SHA-256(minify(RequestBody))))

Example: {"hello": "world"}

Result SHA256 : a47a5f14b3e78b5e3d3f81b1a1468499be964660f818c10adcac792c42709749

Lower case is easy, hex encode is easy, sha-256 is easy, but what does minify do - and can it accept binary chars?