Cannot upload files using fetcher Form in Safari

[dylantf]

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 139.83 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.asdf/installs/nodejs/20.11.0/bin/node
    Yarn: 1.22.21 - ~/.asdf/installs/nodejs/20.11.0/bin/yarn
    npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.3.1
  npmPackages:
    @remix-run/dev: ^2.7.1 => 2.7.1
    @remix-run/express: ^2.7.1 => 2.7.1
    @remix-run/node: ^2.7.1 => 2.7.1
    @remix-run/react: ^2.7.1 => 2.7.1

Used Package Manager

yarn

Expected Behavior

Files to be sent to the Remix server when uploaded using fetcher forms

Actual Behavior

Specifically when using a fetcher Form tag and only in Safari, it appears files are not being sent to the Remix backend server:

const fetcher = useFetcher();

return <fetcher.Form method="post" encType="multipart/form-data">.......

Switching this tag out for a plain html <form> tag resolves the issue, so it must be something in the fetcher. This also works fine in Chrome/Firefox already.

When inspecting the network POST request to the Remix backend:

In Chrome:

------WebKitFormBoundaryZXkMcv6WwCaMXuMV
Content-Disposition: form-data; name="registrationDocument"; filename="Screenshot 2024-03-07 at 1.03.03 PM.png"
Content-Type: image/png

PNG

IHDRpúcíIAiCCPICC ProfileHWXSÉ[@
<more encoded gibberish>

In Safari:

------WebKitFormBoundaryMxOuFtP0iBaboOLT
Content-Disposition: form-data; name="insuranceDocument"; filename=""
Content-Type: application/octet-stream

<the end>