Web. Can't send 100MB with a multipart request.

[Wissperwind]

Hi,

I try to upload some files to my server. I had problems with large files. So I wrote a test script that simulates files to find out the threshold. I can upload a 99MB file just fine, but I can't upload a 100MB file. There is an XMLHttpRequest error and my server is not contacted. So there is no 500 error or so.

Here is my test code:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {


  var fileSizeInMB;
  var fileSize;

  _MyAppState () {
    fileSizeInMB = 100;
    fileSize = fileSizeInMB * 1024 * 1024;
  }



  Stream<List<int>> getFileStream() async* {
    const int chunkSize = 1024 * 1024;

    int start = 0;
    while (start < fileSize) {
      final end = start + chunkSize > fileSize ? fileSize : start + chunkSize;
      var list = List<int>.filled(end - start, 0);
      yield list;
      start += chunkSize;
    }
  }


  @override
  Widget build(BuildContext context) {


    VoidCallback onSendPressed = () async {

      print("send pressed");

      //---Create http package multipart request object
      var request = http.MultipartRequest(
        "POST",
        Uri.parse("http://127.0.0.1:8000/backend/api/upload"),
      );

      Map<String, String> headers = {
        'Authorization': "token if needed"
      };
      request.headers.addAll(headers);

      request.fields["taskId"] = "64";


      //-----add selected file with request
      request.files.add(http.MultipartFile(
          "Your parameter name on server side", getFileStream(),
          fileSize,
          filename: "$fileSizeInMB.txt"));

      //-------Send request
      var resp = await request.send();

      //------Read response
      String result2 = await resp.stream.bytesToString();

      //-------Your response
      print(result2);

    };


    TextButton selectAndSend = TextButton(onPressed: onSendPressed, child: Text("click me"));


    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(title: Text('Flutter bug example')),
          body: selectAndSend
          )
    );

  }
}

Here is my flutter doctor:

[√] Flutter (Channel master, 2.9.0-1.0.pre.147, on Microsoft Windows [Version 10.0.19043.1348], locale de-DE)
    • Flutter version 2.9.0-1.0.pre.147 at C:\Users\name\Flutter SDK\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 1c4128c703 (16 hours ago), 2021-12-21 08:39:18 -0800
    • Engine revision 4aec3e6b2e
    • Dart version 2.16.0 (build 2.16.0-124.0.dev)
    • DevTools version 2.9.2

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\akilian\AppData\Local\Android\sdk
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[√] VS Code (version 1.52.1)
    • VS Code at C:\Users\akilian\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 96.0.4664.110
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 95.0.1020.53

[√] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

So why can't I send 100MB?

[Wissperwind]

Error: XMLHttpRequest error.
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 910:28                get current
packages/http/src/browser_client.dart 69:22                                                                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1685:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 160:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 767:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 796:13                                        _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 593:7                                         [_complete]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream.dart 1288:7                                             <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 334:14  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 339:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37272:58                              <fn>


    at Object.createErrorWithStack (http://localhost:52819/dart_sdk.js:5080:12)
    at Function._throw (http://localhost:52819/dart_sdk.js:20334:18)
    at Function.throwWithStackTrace (http://localhost:52819/dart_sdk.js:20331:18)
    at async._AsyncCallbackEntry.new.callback (http://localhost:52819/dart_sdk.js:40852:18)
    at Object._microtaskLoop (http://localhost:52819/dart_sdk.js:40709:13)
    at _startMicrotaskLoop (http://localhost:52819/dart_sdk.js:40715:13)
    at http://localhost:52819/dart_sdk.js:36190:9

[Wissperwind]

ok, seems that my cherrypy has that limit in request body size. What is the best method to split a file in flutter to upload in chunks? You can close this issue now.