How do I correctly send a binary file over POST to an ESP32 device from a React Native app?

[bcmendis]

Hi all,

I am developing a React Native app, that communicates with a remote with an ESP32 board inside it. The app needs to send a binary file to a Web Server created by the ESP32 and successfully update its firmware. The binary file is approximately 1.73MB.

Initializing the web server is directly lifted from the WebServer example in this repo, with a few minor changes to send UDP signals: Example

server.on("/update", HTTP_POST, []()
  {
    server.sendHeader("Connection", "close");
    server.send(200, "text/plain", (Update.hasError()) ? "FAIL" : "OK");

    if (SelfOTA)
    {
      sendUDP("OTA_Done,");
      delay(1000);
      ESP.restart();
    }

  },
  []()
  {
    //udp.stop();
    HTTPUpload& upload = server.upload();
    if (upload.status == UPLOAD_FILE_START) {
      showUpdating = true;
      Keep_Screen_On = true;
      webServerStartFlag = true;
      ////serial.println("web updated started now");
      ////serial.printf("Update: %s\n", upload.filename.c_str());
      if (!Update.begin(UPDATE_SIZE_UNKNOWN)) { //start with max available size
        //Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_WRITE) {
      /* flashing firmware to ESP*/
      ////serial.println(String(upload.totalSize));
      ////serial.println(xPortGetCoreID());
      sendUDP("R" + String(upload.totalSize));
      if (Update.write(upload.buf, upload.currentSize) != upload.currentSize) {
        //Update.printError(Serial);
      }
    } else if (upload.status == UPLOAD_FILE_END) {
      if (Update.end(true)) { //true to set the size to the current progress
        ////serial.printf("Update Success: %u\nRebooting...\n", upload.totalSize);
        webServerStartFlag = false;
        BluetoothFlag = false;
      } else {
        //Update.printError(Serial);
        webServerStartFlag = false;
      }
    }
  });

Here is my Typescript code, running on the React Native side:
Basically copying the file over to the Documents directory from the assets folder in the Android bundle before sending it over POST.

const expoAssetsUri = FileSystem.bundleDirectory;
const expoDocumentUri = FileSystem.documentDirectory;
const initialUpdateFilePath =
  expoAssetsUri + "updates/Firmware.ino.pico32.bin";
const finalUpdateFilePath =
  expoDocumentUri + "Firmware.ino.pico32.bin";

try {
  await FileSystem.copyAsync({
    from: initialUpdateFilePath,
    to: finalUpdateFilePath,
  });

  setIsSendingData(true);

  const formData = new FormData();
  formData.append("Firmware.ino.pico32.bin", {
    uri: finalUpdateFilePath,
    name: "Firmware.ino.pico32.bin",
    type: "application/octet-stream",
  } as any);

  const response = await axios.post(ESP32_UPDATE_URL, {
    headers: {
      "Content-Type": "multipart/form-data",
    },
    body: formData,
  });

I am able to successfully connect to the web server and hit the "/update" endpoint.
The issue is that I immediately get the 200,OK response and the callback responsible for processing the binary file as its being sent over is not being called.

I suspect it has something to do with the way I'm sending the binary file. Do I need to manually chunk it and send it via POST as a Blob/buffer array?

Does anyone have any experience with sending binary files in this way?

Thank you for your help in advance.